jQuery无法处理AJAX加载的内容来显示/隐藏div内容
[英]jQuery not working on AJAX-loaded content to show/hide div contents
问题描述
I am working on a project where I need to show/hide a div according to a drop down value. 
我正在一个项目中，我需要根据下拉值显示/隐藏div。 Show/hide works fine when it performs on same page but when I try this same in an AJAX-loaded function it fails. 显示/隐藏在同一页面上执行时可以正常工作，但是当我在AJAX加载的函数中尝试同样的操作时，它将失败。
I hope there is something that is missing that I don't know. 我希望有一些我不知道的缺失。
In short, I want to hide/show the div when I select option on an AJAX-loaded page. 简而言之，我想在加载AJAX的页面上选择选项时隐藏/显示div。
index.php : index.php ：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<!-- there is nothing related to it... it's here because I have copied it from the w3schools website -->
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">getdata</option>
</select>
</form>
<br><br><br>
<div id="txtHint" style="background-color: #CCCCCC"><b> ajax data will listed here</b></div>
</body>
</html>
getdata.php : getdata.php ：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p> its page2</p>
<select name="type" id="type" >
<option value="1show" >show div 1</option>
<option value="2show" >show div 1 </option>
</select>
<div id="div1" style="display:none">
div1 data
</div>
<div id="div2" style="display:none">
div 2 data
</div>
</body>
</html>
<script>
$('#type').on('change', function() {
if ( this.value == '1show' ) {
$("#div1").show();
$("#div2").hide();
} else if(this.value == '2show') {
$("#div1").hide();
$("#div2").show();
}
});
</script>
2 个解决方案
解决方案1
0 2016-04-22 11:02:40
may be ajax of INDEX.php loads only html data. 可能是INDEX.php的ajax，仅加载html数据。 so i create another file which contains all the scripts and that works fine. 所以我创建了一个包含所有脚本的文件，并且工作正常。 still waiting for any expert to explain why that happen. 仍在等待任何专家解释为什么会这样。
this contains js data this is how i call js file in index page after first ajax is called $("#box").load("ab.js"); 这包含js数据，这就是在第一个ajax被称为$（“＃box”）。load（“ ab.js”）之后，我如何在索引页面中调用js文件；
解决方案2
0 已采纳 2016-04-22 12:40:37
You need to bind the event to the document. 您需要将事件绑定到文档。
try 尝试
$(document).on('change','#type' ,function() {
if ( this.value == '1show' ) {
$("#div1").show();
$("#div2").hide();
} else if(this.value == '2show') {
$("#div1").hide();
$("#div2").show();
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.