jQuery 更改时动态创建的选择菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18746381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically created select menu on change not working
提问by ttmt
I have a jsfiddle here - http://jsfiddle.net/FTHVJ/
我这里有一个 jsfiddle - http://jsfiddle.net/FTHVJ/
And demo here - http://ttmt.org.uk/select
和演示在这里 - http://ttmt.org.uk/select
I know this looks a little crazy but it's cloest I could get to the actual code.
我知道这看起来有点疯狂，但我最接近实际代码。
I have an on 'change' event handler on a select menu #menu_One
我在选择菜单上有一个 on 'change' 事件处理程序 #menu_One
This then adds a new select menu #menu_Two that is saved in jquery as a variable.
然后添加一个新的选择菜单#menu_Two，它作为变量保存在 jquery 中。
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>
回答by rink.attendant.6
For dynamically created elements, you need to use the .onfunction:
对于动态创建的元素，您需要使用.on函数：
$('#new_select').on('change', '#menu_Two', function(){
alert('here');
});
Event listeners can only be attached to elements that are in the DOM, not elements that don't exist at the time.
事件侦听器只能附加到 DOM 中的元素，而不是当时不存在的元素。
回答by Unknown
回答by urban_raccoons
You shouldn't add the event handler until you've added the DOM node:
在添加 DOM 节点之前，不应添加事件处理程序：
$(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');
})
});
});
With fiddle: http://jsfiddle.net/cjcLU/
用小提琴：http: //jsfiddle.net/cjcLU/
回答by Wasim A.
this is how I did it
我就是这样做的
$(document).on('change', "body", function(){
$( ".ui-selectmenu" ).selectmenu();
});
