jQuery不会自动触发新创建的元素

Question

我有一个带按钮的页面，当用户点击该按钮时，将出现新的“选择标签”

新的select有类'selector'，并且在该调用上有一个jQuery调用，但不会触发

html代码

<ul id="ul">
    <li>
        <select class='selector'></select>
        <input type='button' value='new select' id='newSelect'/>
    </li>
</ul>​

jQuery代码

$(document).ready(function (){
    var options = "<option>Select Name</option>";
    options +="<option>Roma</option>";
    options +="<option>Milano</option>";
    $('#ul .selector').html(options);
});
$(document).ready(function(){
    $('#ul').on('click','#newSelect',function(){
        $('#ul').append("<li><select class='.selector'></select></li>");
    });
});

check the code here please

Answer 1

您应该删除此行中的点：

$('#ul').append("<li><select class='.selector'></select></li>");  

到

$('#ul').append("<li><select class='selector'></select></li>");  

如果你想像第一个那样填充选择列表，可以这样做：
http://jsfiddle.net/puUcp/19/

Answer 2

实际上，填充选择器只会在文档加载时触发，并且应该从新的select-class中删除该点，并且应该单击选择器。 所以新代码应该是：

$(document).ready(function (){
    var options = "<option>Select Name</option>";
    options +="<option>Roma</option>";
    options +="<option>Milano</option>";
    $('#ul .selector').html(options);

    $('#ul').on('click','#newSelect',function(){
        $('#ul').append("<li><select class='selector'></select></li>");
        $('#ul .selector').html(options);
    });
});

Answer 3

看起来你只需要克隆每次想要添加新元素时弹出的第一个选择元素（已经是）。这看起来像

$(document).ready(function(){
    $('#ul').on('click','#newSelect',function(){
        $('#ul').append($("#ul > li:first-child").clone());
    });
});

<强> See it in action

但是你不应该完全上面因为$("#ul > li:first-child")包含id的按钮 - 而且id s在DOM中应该是唯一的。从按钮中删除id会使事情变好。