无法识别JQuery单击事件
JQuery Click Event not Recognized
我正在开发一个由一个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对象：
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脚本创建的。感谢您查看
我有两个下拉菜单，第一个选项填充第二部分
我想这将填充第一个下拉列表：
<script type="text/javascript">
pageExecute.populateAreasDropDown();
</script>
在加载页面时。
当用户选择一个选项时，第二个下拉列表将被填充，因此当您调用$(".ddByName").click() 时，第2个下拉列表的选项还不可用
解决方案：在pageExecute.populateSlidesDropDown() 的末尾绑定第二次单击函数
相关文章：
- 将单击事件添加到数据表
- 将单击事件添加到附加的项目中
- 在IE8中不起作用的元素上触发单击事件
- 链接上的IE10 jquery句柄单击事件不起作用
- 如何使用纯 JavaScript 在所有浏览器中区分左/右/中键单击事件
- 如何在master中调用细节网格作为单击事件
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 如何隐藏按钮单击事件上的占位符
- 复选框，然后单击事件处理
- 如何使用for循环添加所有按钮'单击事件
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- 覆盖单击事件不起作用
- 单击事件打开两个弹出菜单
- 单击事件不起作用
- 从其他元素上的单击事件访问image src属性
- 单击事件中的ajax请求后重定向
- 如何缩放地图框传单中的标记单击事件
- 在没有焦点的情况下捕获画布上的第一次单击事件
- 通过单击事件识别画布上的对象
- 如何将单击事件添加到JQuery中动态添加的元素中
