0
하나의 HTML 페이지로 구성된 사이트를 개발 중입니다. HTML 페이지는 모든 XMLHttpRequests의 셸 역할을합니다. 두 번째 드롭 다운 메뉴에서 첫 번째 선택 영역에 두 번째 섹션이 채워지고 두 번째 선택 영역에는 <ol>에 목록 요소가 채워집니다. 지난 $의 .click()가 작동하지 않습니다JQuery Click 이벤트 인식되지 않음
<!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>
어떤 이유를 들어 다음과 같습니다 (할당 된 시간에 맞게 포맷 )을 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])
}
};
, 나는만큼 지방 가능한 잘라하려고 노력했다. 마지막 클릭 이상에서 click 이벤트가 작동하는 이유는 무엇입니까 (ddByAreaclass). 그러나 마지막 이벤트는 (ddbyName 클래스) 그렇지 않은 이유는 무엇입니까? 이 두 항목은 모두 pageExecute 스크립트로 작성됩니다.
두 개의 클릭 이벤트 비트를 dom 준비 이벤트 블록으로 이동하십시오. – asawyer
[jsFiddle] (http://jsfiddle.net)이거나 그렇지 않습니다. –
@asawyer - 문제가 해결 될 수도 있다고 생각했지만 도움이되지 않습니다. 방금 다시 시도했습니다. 첫 번째 클릭은 여전히 작동하지만 ... 두 번째 클릭은 작동하지 않습니다. 경고는 절대 발생하지 않습니다. – atomSmasher