onchange event not working in dropdown menu added from another php page using jquery
Question
i want to display all table list from a database in drop down menu and allow user to select table name. when user selects table name i want to show all the data. html file is like this
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$.ajax({url:"home.php?id=1",
success:function(result){
$("#div1").html(result);
}});
$("#dropdown").change(function(){
alert("list item selected");
$.ajax({url:"home.php?id=2&tablename="+tableForm.tableLists.value,
success:function(result){
$("#div2").html(result);
}});
});
});
</script>
</head>
<body>
<button value="add" >
<form name="tableForm">
<div id="div1"></div>
</form>
</button>
<br><hr>
<div id="div2"></div>
</body>
this page runs okay and displays a list of alltable name belonging to database. but when i select a value from the dropdown list it doesnt even alert "list item selected" messsage. what to do to make it work ??
here is the an image of dropdown list
3 answers
solution1
2 ACCPTED 2012-11-23 10:45:08
It looks like the dropdown box is dynamically loaded into the page, so you must bind the function to the dynamically added element using .on() :
$(document).on('change', '#dropdown', function(){
console.log("list item selected");
// do whatever here
});
solution2
0 2012-11-23 10:47:07
I think dropdown box is loaded dynamically into the page. You can use like that
$("#dropdown").on('change',function(){
alert("hoi");
$.ajax({url:"home.php?id=2&tablename="+tableForm.tableLists.value,
success:function(result){
$("#div2").html(result);
}});
});
solution3
0 2012-11-23 10:55:00
As your code suggests that you are populating your dropdown dynamically and in your code you are giving a local event which will not work there are several other event handlers like .on .bind .live etc, if i have to work in this kind of situation i would definetly prefer to use .on or .live so your code has to be like these:
$("#dropdown").live('change',function(){
alert("list item selected");
$.ajax({
url:"home.php?id=2&tablename="+tableForm.tableLists.value,
success:function(result){
$("#div2").html(result);
}
});
});
or this:
$("#dropdown").on('change',function(){
alert("list item selected");
$.ajax({
url:"home.php?id=2&tablename="+tableForm.tableLists.value,
success:function(result){
$("#div2").html(result);
}
});
});
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.