Question

我的印象是jquery的on()对动态添加到dom的事件附加元素做出了反应（通过ajax或克隆等）。但是，以下内容仅适用于页面加载时附加到dom的元素。我使用clone()创建的另一个副本并没有被处理好。

$(document).ready(function () {
    $('.ship_via_dropdown').on('change', function () {
        console.log($(this));
        if ($(this).hasClass('prev_change')) {
            console.log('has');
        } else {
            $(this).addClass('prev_change');
            console.log('hasn\'t');
        }
    });
});

克隆代码：

$(document).ready(function(){
    var form1 = $('.line_item_wrapper').children().clone(); 
    $('#new_line_content_1').html(form1);
});

用于下拉列表的HTML（由文档准备好的jquery db query添加的内容）

<span class="select ship_via_select_container">
    <select class="ship_via_dropdown ship_via_dropdown_1">
    </select>
</span>

感谢您的任何见解！

Answer 1

代替事件：

$(document).on('change', '.ship_via_dropdown', function () {
    console.log($(this));
    if ($(this).hasClass('prev_change')) {
        console.log('has');
    } else {
        $(this).addClass('prev_change');
        console.log('hasn\'t');
    }
});

或者更好的是，使用.clone(true)克隆事件。（注意：只有在附加事件处理程序后进行克隆时，这才有效。）

Answer 2

确实如此，但不是你想的那样。当你使用它时使用：

$('.ship_via_dropdown').on('change',

与使用.change()完全没什么不同。你在寻找的是event delegation。这采用以下形式：

$("<selector to static ancestor>").on('change', '.ship_via_dropdown', function () {

其中<selector to static ancestor>是动态添加元素的静态祖先的选择器。（一个不是动态创建的）作为最后的手段document可以在这里使用。但是为了提高性能，这应该是最接近的静态祖先元素。

Answer 3

jquery的on()对动态添加的事件附加元素做出反应

不 - 或者至少，只有你use it with delegated events。 live method始终将事件委托给document。

Answer 4

更改此行：

$('.ship_via_dropdown').on('change', function () {

到此：

$(document).on('change',".ship_via_dropdown", function () {

jquery on对clone（）添加的元素没有反应

4 个答案: