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

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

并在这里演示 – http://ttmt.org.uk/select

我知道这看起来有点疯狂，但它是我可以得到的实际代码。

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

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

然后我尝试在这个添加的选择菜单中添加一个’更改’事件处理程序。

on’change’事件不适用于添加的选择菜单。

        *{ 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; }     
  Menu One 1 Menu One 2 Menu One 3 Menu One 4 Menu One 5  
 
 
   $(function(){ var select_two = ""; select_two += "Menu Two 1"; select_two += "Menu Two 2"; select_two += "Menu Two 3"; select_two += "Menu Two 4"; select_two += ""; $('#menu_One').on('change', function(){ $('#new_select').append(select_two); }); $('#menu_Two').on('change', function(){ alert('here'); }) });   

Answer 1

对于动态创建的元素，您需要使用.on函数 ：

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

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

Answer 2

尝试：

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

DEMO FIDDLE

Answer 3

在添加DOM节点之前，不应添加事件处理程序：

 $(function(){ var select_two = ""; select_two += "Menu Two 1"; select_two += "Menu Two 2"; select_two += "Menu Two 3"; select_two += "Menu Two 4"; select_two += ""; $('#menu_One').on('change', function(){ $('#new_select').append(select_two); $('#menu_Two').on('change', function(){ alert('here'); }) }); }); 

小提琴： http ： //jsfiddle.net/cjcLU/

Answer 4

这就是我做到的

 $(document).on('change', "body", function(){ $( ".ui-selectmenu" ).selectmenu(); });