0
我正在開發一個包含一個HTML頁面的網站。 HTML頁面將充當所有XMLHttpRequests的外殼。我有兩個下拉菜單，第一個選擇填充第二個部分，第二個選擇填充帶有列表元素的<ol>。這裏是HTML（格式化，以適應在規定的時間）：JQuery Click Event not Recognized
<!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>
無論出於何種原因，最後$。點擊（）不工作。警報不會彈出。上面的點擊事件確實有效，沒有問題。所以這讓我相信它與秩序無關。這是通過腳本穿插的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 class）？這兩個項目都是使用pageExecute腳本創建的。感謝您尋找
將兩個單擊事件位移入dom就緒事件塊。 – asawyer 2012-07-27 22:27:21
[jsFiddle]（http://jsfiddle.net），或者它沒有發生。 – 2012-07-27 22:29:39
@asawyer - 我認爲這也可以解決這個問題，但它沒有幫助。我只是再次嘗試確定。第一次點擊甚至仍然有效......但第二次點擊沒有。警報從不會觸發。 – atomSmasher 2012-07-27 22:31:55