无法识别JQuery单击事件

我正在开发一个由一个HTML页面组成的网站。HTML页面将充当所有XMLHttpRequest的外壳。我有两个下拉菜单，第一个选择填充第二个部分，第二个选择填充带有列表元素的<ol>。这是HTML（格式化以适应分配的时间）：

<!DOCTYPE html>
<?php
//Get user Device
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect();
$layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop');
$thisPage = $_GET['mod'];
?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/plantSeed.js"></script>
<script type="text/javascript">pageExecute.init("<? echo $thisPage; ?>");</script>
<link rel="stylesheet" href="css/modstyles.css" type="text/css" media="screen">
<meta charset="utf-8">
<title id="browserTitle"></title>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<header id="mainHeader">
<div id="pageTitle">
    <!--   -->
</div>
<script type="text/javascript"> pageExecute.populatePageTitle(); </script>
<div id="imgInfoTxtHead">
    <h3 class="imgInfoTxt">Ag-01a</h3>
    <p><i>Catheter Angiography</i></p>
</div>
</header>
<section id="mainSection">
<div id="largeImages">
     <!-- Image Holder ...
</div>
<!-- End largeImages -->
<div id="leftMenu" class="ui-resizable">
    <div id="menuHideBar"></div>
    <div id="addHolder">

        <!-- Quick Pick By Name Section -->
        <h3><a href="#">Quick Pick By Name</a></h3>
        <div id="quickPickName">
            <form action="#">
                <div>
                    <!-- TODO: Change to JQuery dropdown -->
                    <label for="areaSelect">Area Selection</label><br/>
                    <select id="areaSelect"></select><br/>
                    <label for="slideSelect">Slide Selection</label><br/>
                    <select id="slideSelect"></select>
                </div>
            </form>
            <script type="text/javascript">
                pageExecute.populateAreasDropDown();
            </script>
        </div>
        <!-- Quick Pick By Image Section --> ...

        <!-- Notes Section --> ...

        <!-- Quiz Section --> ...
<!-- END leftMenu -->
</section>
<!-- END mainSection -->
<footer id="mainFooter">
  ....
</footer>
<!-- Scripts -->

<script>
$(".ddByArea").click(function () {
    pageExecute.rebuild($(this).attr("value"));
});
$(".ddByName").click(function () {
    alert(pageExecute.identifiers);
   // pageExecute.populateIdentifiers($(this).attr("value"));
});

 </script>
 <script type="text/javascript">
 $(document).ready(function () {
    $("*").addClass("<? echo $layout ?>");
});
</script>
</body>
</html>

无论出于何种原因，最后一个$.click（）都不起作用。警报不会弹出。上面的点击事件确实有效，没有任何问题。所以这让我相信这与秩序无关。下面是脚本中穿插的pageExecute对象：

var pageExecute = {
identifiers:new Array(),
set:new Array(),
slide:"",
slideTitle:"",
slideType:"",
area:new Array(),
page:"",
selectedArea:"",
selectedIdent:"",
selectedSlide:"",
init:function (thisPage) {
  //Populate Area Data from XML
    var areaData = "./XML/Areas.xml";
    var areaRequest = pageExecute.createXMLHttpRequest();
    pageExecute.requestData(areaRequest, areaData, null, "area");
   //Populate General Page Info from XML
    var generalPageData = "";
    if (thisPage != ""){
        generalPageData = "./XML/" + thisPage + ".xml";
    } else {
        generalPageData = "./XML/" + pageExecute.area[0] + ".xml";
    }
    var generalRequest = pageExecute.createXMLHttpRequest();
    pageExecute.requestData(generalRequest, generalPageData, null, "general");

},
requestData:function (request, URL, data, orders) {
    if (request) {
        request.open('GET', URL, false);
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                if (request.status == 200) {
                    var response = request.responseXML;
                    if (orders == "area") {
                        var rawAreas = response.getElementsByTagName("Areas")[0].childNodes[0].nodeValue;
                        var splitAreas = rawAreas.split(',');
                        var sortedAreas = splitAreas.sort();
                        for (var i = 0; i < splitAreas.length; i++) {
                            pageExecute.area[i] = sortedAreas[i];
                        }
                    }
                    else if (orders == "general") {
                        //Pull page title from XML
                        pageExecute.page = response.getElementsByTagName("Area")[0].childNodes[0].nodeValue;
                        //Pull all slides from XML
                        var rawSet = response.getElementsByTagName("Slide");
                        for(var j = 0; j < rawSet.length; j++){
                        pageExecute.set[j] = rawSet[j].childNodes[0].nodeValue;
                        }
                        pageExecute.slideType = response.getElementsByTagName("Type")[0].childNodes[0].nodeValue;
                    } else if (orders == "slides"){

                    }else if (orders == "identifiers"){
                       var rawIdent = response.getElementsByTagName("Slide").nodeValue(pageExecute.selectedSlide.substring(0,pageExecute.selectedSlide.indexOf(" "))).getElementsByTagName("Identifier");
                        for (var k = 0; k < rawIdent.length; k++){
                            pageExecute.identifiers[k]=rawIdent[k].childNodes[0].nodeValue;
                        }
                    }
                    }
                } else {
                    alert('There was a problem retrieving the data: n' + request.statusText);
                    request = null;
                }
        };
        request.send(data);
        request.abort();
    } else {
        alert("Sorry, there was an error loading this information!");
    }
},
createXMLHttpRequest:function () {
    var request = false;
    if (window.XMLHttpRequest) {
        if (typeof XMLHttpRequest == "undefined") {
            var xhrNames = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
            for (var i = 0; i < xhrNames.length; i++) {
                try {
                    request = new ActiveXObject(xhrNames[i]);
                    break;
                } catch (e) {
                    request = false;
                }
            }
        } else {
            request = new XMLHttpRequest();
        }
    }
    return request;
},
populateAreasDropDown:function () {
    for (var i = 0; i < pageExecute.area.length; i++) {
        $("<option class='ddByArea' value='" + pageExecute.area[i] + "'>" + pageExecute.area[i] + "</option>").appendTo("#areaSelect");
    }
},
populateSlidesDropDown:function (thisArea) {
    var slideRequest = pageExecute.createXMLHttpRequest();
    pageExecute.requestData(slideRequest, "./XML/" + thisArea + ".xml", null, "slides");
    for (var i = 0; i < pageExecute.set.length; i++) {
        $("<option class='ddByName' value='" + pageExecute.set[i] + "'>" + pageExecute.set[i] + " - " + pageExecute.slideTitle + "</option>").appendTo("#slideSelect");
    }
},
populateIdentifiers:function(thisSlide){
    pageExecute.selectedSlide = thisSlide;
    var identData = "./XML/" + pageExecute.selectedArea.substring(0, pageExecute.selectedArea.indexOf(" ")) + ".xml";
    var identRequest = pageExecute.createXMLHttpRequest();
    pageExecute.requestData(identRequest, identData, null, "identifiers");
    for(var l = 0; l < pageExecute.identifiers; l++){
    $("#identList").append("<li>" + pageExecute.identifiers[l] + "</li>")
    }
},
populatePageTitle: function(){
    $("#browserTitle").append(pageExecute.slideType + ": " + pageExecute.page);
    $("#pageTitle").append("<h3>" + pageExecute.slideType + ": " + pageExecute.page + "</h3>");

    var firstSlide = pageExecute.set[0];
    var lastSlide = pageExecute.set[pageExecute.set.length - 1];

    $("#pageTitle").append("<p><i>" + firstSlide + " through " + lastSlide + "</i></p>")
},
rebuild: function(thisArea){
   pageExecute.selectedArea = thisArea;
   var trimArea = thisArea.substring(0, thisArea.indexOf(" "));
    pageExecute.init(trimArea);
    //Rebuild Page information
   $("#browserTitle").html(pageExecute.slideType + ": " + pageExecute.page);
   $("#pageTitle h3").html(pageExecute.slideType + ": " + pageExecute.page);
    var firstSlide = pageExecute.set[0];
    var lastSlide = pageExecute.set[pageExecute.set.length - 1];
    $("#pageTitle p").html("<i>" + firstSlide + " through " + lastSlide + "</i>");
    //Remove existing options from the slides dropdown and add new.
    $(".ddByName").remove();
    pageExecute.populateIdentifiers(pageExecute.slide[0])
}
};

我为长度道歉，我尽量减少脂肪。你知道为什么最后一次点击上面的点击事件（ddByAreaclass）有效，而最后一次却无效（ddbyName类）吗？这两个项目都是使用pageExecute脚本创建的。感谢您查看

我有两个下拉菜单，第一个选项填充第二部分

我想这将填充第一个下拉列表：

<script type="text/javascript">
   pageExecute.populateAreasDropDown();
</script>

在加载页面时。

当用户选择一个选项时，第二个下拉列表将被填充，因此当您调用$(".ddByName").click() 时，第2个下拉列表的选项还不可用

解决方案：在pageExecute.populateSlidesDropDown() 的末尾绑定第二次单击函数

相关内容

最新更新

热门标签：