Question

我通过按钮点击事件生成一个下拉框。在此下拉列表中，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" />

Answer 1

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

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

请注意，您的样式标记中还有一个}。最好在CSS文件中使用它。

演示here

点击此链接了解.on()。在委派的事件中，第一部分可以阅读：

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

Answer 2

使用Dynamic created-elements，最好使用“on”和“off”来绑定事件

$(".pincode").on("change", function(){
            alert($(this).val());});

对于动态生成的下拉列表，jquery change事件不会触发

2 个答案:

演示here