动态创建的更改选择菜单不起作用 [英] Dynamically created select menu on change not working
问题描述
我在这里有一个jsfiddle- http://jsfiddle.net/FTHVJ/
I have a jsfiddle here - http://jsfiddle.net/FTHVJ/
此处演示- http://ttmt.org.uk/select
我知道这看起来有些疯狂，但这是我可以得到实际代码的最简单的信息.
I know this looks a little crazy but it's cloest I could get to the actual code.
我在选择菜单#menu_One上有一个on'change'事件处理程序
I have an on 'change' event handler on a select menu #menu_One
然后添加一个新的选择菜单#menu_Two，该菜单保存在jquery中作为变量.
This then adds a new select menu #menu_Two that is saved in jquery as a variable.
然后，我试图向此添加的选择菜单添加一个on'change'事件处理程序.
I'm then trying to add an on 'change' event handler to this added select menu.
添加了选择菜单的on'change'事件不起作用.
The on 'change' event doesn't work on thw added select menu.
<!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函数:
For dynamically created elements, you need to use the .on function:
$('#new_select').on('change', '#menu_Two', function(){
alert('here');
});
事件侦听器只能附加到DOM中的元素，而不能附加到当时不存在的元素.
Event listeners can only be attached to elements that are in the DOM, not elements that don't exist at the time.
这篇关于动态创建的更改选择菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
