onchange 事件在使用 jquery 从另一个 php 页面添加的下拉菜单中不起作用
[英]onchange event not working in dropdown menu added from another php page using jquery
问题描述
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 html文件是这样的
<!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 个解决方案
解决方案1
2 已采纳 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() :看起来下拉框是动态加载到页面中的，因此您必须使用.on()将该函数绑定到动态添加的元素：
$(document).on('change', '#dropdown', function(){
console.log("list item selected");
// do whatever here
});
解决方案2
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);
}});
});
解决方案3
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:由于您的代码表明您正在动态填充下拉列表，并且在您的代码中，您提供了一个不起作用的本地事件，如果我必须在这种情况下工作，还有其他几个事件处理程序，如.on .bind .live等我肯定更喜欢使用.on或.live所以你的代码必须是这样的：
$("#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);
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.