gpt4 book ai didi

动态生成的下拉列表不会触发 jquery 更改事件

转载 作者:行者123 更新时间:2023-12-01 01:56:59 24 4
gpt4 key购买 nike

我通过按钮单击事件生成一个下拉框。在此下拉列表中,不会触发 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" />

最佳答案

您需要使用委托(delegate),因为该元素是动态加载的,并且在创建事件监听器时并不存在。

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

请注意,样式标签内有一个额外的 }。最好将其包含在 CSS 文件中。

演示 here

检查此链接有关 .on() 。在委托(delegate)事件中,我们可以看到:

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to 'the event handler'.

关于动态生成的下拉列表不会触发 jquery 更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19481805/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com