jQuery not working on AJAX-loaded content to show/hide div contents
Question
I am working on a project where I need to show/hide a div according to a drop down value. Show/hide works fine when it performs on same page but when I try this same in an AJAX-loaded function it fails.
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.
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 :
<!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 answers
solution1
0 2016-04-22 11:02:40
may be ajax of INDEX.php loads only html data. 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");
solution2
0 ACCPTED 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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.