gpt4 book ai didi

jquery - 动态创建的更改选择菜单不起作用

转载 作者:行者123 更新时间:2023-12-03 22:42:32 24 4
gpt4 key购买 nike

我这里有一个 jsfiddle - http://jsfiddle.net/FTHVJ/

这里演示 - http://ttmt.org.uk/select

我知道这看起来有点疯狂,但它是我能得到的最接近实际代码的。

我在选择菜单 #menu_One 上有一个“更改”事件处理程序

然后添加一个新的选择菜单#menu_Two,该菜单作为变量保存在 jquery 中。

然后,我尝试将“更改”事件处理程序添加到此添加的选择菜单中。

“更改”事件在添加的选择菜单上不起作用。

    <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


<!--css-->

<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
max-width:800px;
margin:0 auto;
background:#fff;
height:1000px;
padding:50px;
}
#new_select{
height:50px;
margin:20px 0 0 0;
padding:10px 0 0 0;
background:red;
}
</style>

<title>Title of the document</title>
</head>

<body>

<div id="wrap">

<select id="menu_One">
<option>Menu One 1</option>
<option>Menu One 2</option>
<option>Menu One 3</option>
<option>Menu One 4</option>
<option>Menu One 5</option>
</select>

<div id="new_select">
</div>
</div>

</body>


<script>

$(function(){

var select_two = "<select id='menu_Two'>";
select_two += "<option>Menu Two 1</option>";
select_two += "<option>Menu Two 2</option>";
select_two += "<option>Menu Two 3</option>";
select_two += "<option>Menu Two 4</option>";
select_two += "</select>";


$('#menu_One').on('change', function(){
$('#new_select').append(select_two);
});


$('#menu_Two').on('change', function(){
alert('here');
})

});

</script>



</html>

最佳答案

对于动态创建的元素,您需要使用.on function :

$('#new_select').on('change', '#menu_Two', function(){
alert('here');
});

事件监听器只能附加到 DOM 中的元素,不能附加到当时不存在的元素。

关于jquery - 动态创建的更改选择菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18746381/

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