jquery的上不發生反應（）所克隆的添加元素

Question

我的印象是，jquery的on()（通過AJAX或克隆等）反應以附動態添加到DOM元素事件下。但是，以下內容僅適用於頁面加載時連接到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> 

謝謝你的任何見解！

Answer 1

它的確如此，但不符合您的想法。當作爲你使用它：

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

這真的不是比使用.change()不同。你在找什麼是event delegation。此採用以下形式：

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

凡<selector to static ancestor>是一個選擇器，該動態添加元素的靜態祖先。 （一個不是動態創建的）作爲最後的手段document可以在這裏使用。然而對於性能來說，這應該是最接近靜態的祖先元素。

Answer 2

委託授權的情況下，而不是：

$(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 3

改變這一行：

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

這樣：

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

Answer 4

jQuery的on()反應事件附着元件動態地添加

否 - ö至少，只有你use it with delegated events。 live method確實總是將事件委託給document。