0

我的印象是jqueryon()对动态添加到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 查询在文档就绪时添加的内容)

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

感谢您的任何见解!

4

4 回答 4

6

要么委托事件:

$(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)克隆事件。(注意:这仅在附加事件处理程序后进行克隆时才有效。)

于 2012-11-13T21:26:20.107 回答
3

确实如此,但不是你想的那样。当您使用它时:

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

它与使用.change(). 您正在寻找的是事件委托。这采用以下形式:

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

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

于 2012-11-13T21:29:56.803 回答
2

jqueryon()对动态添加的事件附加元素的反应

没有 - 或者至少,只有当你将它与委托事件一起使用时。该live方法确实总是将事件委托给document.

于 2012-11-13T21:27:38.947 回答
1

更改此行:

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

对此:

$(document).on('change',".ship_via_dropdown", function () { 
于 2012-11-13T21:26:28.923 回答