onchange 事件在使用 jquery 从另一个 php 页面添加的下拉菜单中不起作用

Question

我想在下拉菜单中显示数据库中的所有表列表，并允许用户选择表名。 当用户选择表名时，我想显示所有数据。 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>

此页面运行正常并显示属于数据库的所有表名称列表。 但是当我从下拉列表中选择一个值时，它甚至不会提醒“已选择列表项”消息。 怎么做才能让它工作？

这是下拉列表的图像 在此处输入图片说明

Answer 1

看起来下拉框是动态加载到页面中的，因此您必须使用.on()将该函数绑定到动态添加的元素：

$(document).on('change', '#dropdown', function(){
    console.log("list item selected");
    // do whatever here
});

jQuery API：.on()

Answer 2

我认为下拉框是动态加载到页面中的。 你可以这样使用

$("#dropdown").on('change',function(){
                alert("hoi");
                $.ajax({url:"home.php?id=2&tablename="+tableForm.tableLists.value,
                    success:function(result){
                        $("#div2").html(result);
                    }}); 
            });

Answer 3

由于您的代码表明您正在动态填充下拉列表，并且在您的代码中，您提供了一个不起作用的本地事件，如果我必须在这种情况下工作，还有其他几个事件处理程序，如.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);
          }
    }); 
});

或这个：

 $("#dropdown").on('change',function(){
    alert("list item selected");
    $.ajax({
       url:"home.php?id=2&tablename="+tableForm.tableLists.value,
       success:function(result){
            $("#div2").html(result);
          }
    }); 
});

onchange 事件在使用 jquery 从另一个 php 页面添加的下拉菜单中不起作用

问题描述

3 个解决方案

解决方案1
2 已采纳 2012-11-23 10:45:08

解决方案2
0 2012-11-23 10:47:07

解决方案3
0 2012-11-23 10:55:00

onchange 事件在使用 jquery 从另一个 php 页面添加的下拉菜单中不起作用

问题描述

3 个解决方案

解决方案1 2 已采纳 2012-11-23 10:45:08

解决方案2 0 2012-11-23 10:47:07

解决方案3 0 2012-11-23 10:55:00

解决方案1
2 已采纳 2012-11-23 10:45:08

解决方案2
0 2012-11-23 10:47:07

解决方案3
0 2012-11-23 10:55:00