JQuery Click Event not Recognized

Question

I am developing a site that will consist of one HTML page. The HTML page will act as a shell for all of the XMLHttpRequests. I have two dropdown menu's the first selection populates the second section, and the second selection populates an <ol> with list elements. Here is the HTML (Formatted to fit the allotted time):

<!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>

For whatever reason the last $.click() is not working. The alert doesn't pop up. The click event right above does work, with no problems. So this leads me to believe it has nothing to do with order. Here is the pageExecute object peppered through the script:

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])

}

};

I apologize for the length, I tried to cut out as much fat as possible. Any ideas why the click event above the last click even works (ddByAreaclass), but the last one doesn't (ddbyName class)? Both of those items are created with the pageExecute script. Thanks for looking

Move the two click event bits into the dom ready event block. — asawyer
– asawyer, Commented Jul 27, 2012 at 22:27
@asawyer - I thought that might fix the problem also, but it doesn't help. I just tried again to be sure. The first click even still works... but the second doesn't. The alert never fires. — atomSmasher
– atomSmasher, Commented Jul 27, 2012 at 22:31
@atomSmasher run this just before the click event is attached: alert($(".ddByName").length); What does it say? — asawyer
– asawyer, Commented Jul 27, 2012 at 22:39

Dr.Molle · Accepted Answer · 2012-07-27 23:15:17Z

1

I have two dropdown menu's the first selection populates the second section.....

I guess this will populate the first dropdown:

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

...while the page is loading.

The 2nd dropdown will be populated when the user selects an option, so the options of the 2nd dropdown are not available yet when you call $(".ddByName").click()

solution: bind the 2nd click-function at the end of pageExecute.populateSlidesDropDown()

answered Jul 27, 2012 at 23:15

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

atomSmasher Over a year ago

Awesome, thank you! I was messing with this forever. Is there an easy explanation behind why that needs to be in there? I guess I will have to remember to call dynamic values from within their creator. Weird

Dr.Molle Over a year ago

There may be other solutions, but however, the elements must be available when you bind the event, and at the end of this function you can be sure that they exist.

Collectives™ on Stack Overflow

JQuery Click Event not Recognized

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related