2

我通过按钮单击事件生成一个下拉框。在此下拉列表中，onchange 事件不会触发。谁能帮我为什么会这样？代码如下

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {

        $('#pin').click(function() {
            var content='<select class="pincode"><option value="1">1</option><option value="2">2</option></select>';
            $("#test").append(content);

            });
        $(".pincode").change(function(){
            alert($(this).val());
        });     
        });
    </script>
    <style type="text/css">
        div {
            padding: 35px;
            float: left;
        }
        }
    </style>
    <title>New Web Project</title>
</head>
<body>
    <h1>Dynamic Drop Down using jQuery</h1>
    <div>
        <select class="pincode">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>

    <div id="test"></div>
    <input type="button" id="pin" value="pin" />
4

2 回答 2

16

您需要使用委托，因为元素是动态加载的，并且在创建事件侦听器时不存在。

$(document).on('change',".pincode", function(){
    alert(this.value);
});

请注意，}您的样式标签中有一个额外的内容。最好在 CSS 文件中包含它。

演示在这里

检查有关.on()的链接。在委托事件中，第一部分可以阅读：

事件处理程序仅绑定到当前选定的元素；当您的代码调用“事件处理程序”时，它们必须存在于页面上。

于 2013-10-20T19:28:45.557 回答
1

使用动态创建元素，最好使用“on”和“off”来绑定事件

$(".pincode").on("change", function(){
            alert($(this).val());});
于 2013-10-20T19:43:06.733 回答