JQuery的：與克隆製成的元件（）不採取原

Question

HTML的事件屬性：

<h2>CHECK AS MANY AS YOU CAN</h2> 
<form id="boxone"> 
</form> 

JS：

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

for(var i=0; i <341; i++) { 

    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

複選框的其餘不，當我提醒點擊它們，只有原來的那個 我甚至嘗試過$ fourthboxes.on（'點擊'...而不是任何東西 我看了一下這個問題並嘗試瞭解決方案，但它沒有工作。

jQuery clone() not cloning event bindings, even with on()

Answer 1

使用.on()：

$(document).on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 

這使得事件處理工作，爲當前的元素，也是未來添加的元素，在.fourthboxes選擇匹配。這使用委託事件的原則。

從文檔：

當提供一個選擇器，該事件處理程序被稱爲委託。當事件直接發生在綁定元素上時，不會調用該處理程序，而只會爲與選擇器匹配的後代（內部元素）調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層的元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。

Answer 2

它只選擇原件，因爲你從不選擇新的元素。選擇器只有原件，它不是一個現場收藏。所以你需要重新選擇它們。

$(".fourthboxes").on("change", ...) 

您可以使用事件委派，因此您不選擇所有複選框。聆聽表單上的更改事件。

$("#boxone").on("change", ".fourthboxes", function(){}); 

Answer 3

的問題是因爲雖然你用clone(true, true)你克隆你的change事件處理程序添加到他們之前的元素。你只需要圍繞交換邏輯：

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

for(var i=0; i <341; i++) { 
    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

然而，這將是多更好地使用單個委派的事件處理程序，如下所示：

var $boxone = $("#boxone").on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 
var $fourthboxes = $('<input type="checkbox" class="fourthboxes">').appendTo('#boxone'); 

for (var i = 0; i < 341; i++) { 
    $fourthboxes.clone().appendTo($boxone); 
} 

Working example

Answer 4

既然你在添加340個其他複選框之前，將$(".fourthboxes")分配給變量$fourthboxes，當添加更改函數時，該變量仍然只保留一個複選框。

將更改函數放在for循環前面，一切按預期工作。

Answer 5

當你clone一個對象，只有對象被克隆。而不是他們的事件。因爲在創建克隆之前，事件綁定到原始對象（基於使用的jQuery選擇器）。

作爲@trincot在他的回答中提到，您需要在文檔級別有一個事件。

例如，比方說，我的DOM包含三個輸入複選框

<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 

現在，當您綁定使用jQuery選擇像這樣的活動，

$(".fourthboxes").change(function() { 
    alert('yo'); 
}); 

需要注意的事項，就是這個jQuery選擇返回DOM元素的數組，出現在頁面上，在那個瞬間。然後onchange事件被註冊在它們中的每一個上。它相當於將事件綁定到每個現有的DOM（在這種情況下，三個複選框）