jquery - jQuery 不会在新创建的元素上自动触发

Question

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

那个新select的有“选择器”类，并且在那个调用上有一个 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>");
    });
});

​<a href="http://jsfiddle.net/Wiliam_Kinaan/puUcp/12/" rel="nofollow">请查看这里的代码

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

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

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

看到它在行动。

但是，您不应该完全按照上述操作，因为$("#ul > li:first-child")包括具有id-- 和ids 的按钮在 DOM 中应该是唯一的。从按钮中删除id会使事情正常。

Answer 3

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

$(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);
    });
});