JQuery Click事件未被识别

时间：2012-07-27 22:25:59

标签： javascript jquery ajax events

我正在开发一个包含一个HTML页面的网站。 HTML页面将充当所有XMLHttpRequests的shell。我有两个下拉菜单，第一个选择填充第二个部分，第二个选择使用列表元素填充<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对象：

JS 

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脚本创建的。谢谢你看

1 个答案:

答案 0 :(得分：1)

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

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

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

...正在加载页面。

当用户选择一个选项时，将填充第二个下拉列表，因此当您致电$(".ddByName").click()

时，第二个下拉菜单的选项尚不可用

溶液： 绑定pageExecute.populateSlidesDropDown()

末尾的第二个点击功能
相关问题
最新问题