はJQuery：</strong></p> <pre><code><h2>CHECK AS MANY AS YOU CAN</h2> <form id="boxone"> </form> </code></pre> <p><strong>JS：クローンで作られた要素（）、元

Question

HTMLのイベントプロパティを取っていないとき、私は

$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()：.fourthboxesセレクタに一致

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

これは、現在の要素のためのイベントハンドラの仕事になりますが、今後も追加された要素、。これは、委任されたイベントの原則を使用します。ドキュメントから

：

セレクタが設けられている場合、イベントハンドラは、委任と呼ばれています。バインドされた要素でイベントが直接発生したときにハンドラが呼び出されるのではなく、セレクタに一致する子孫（内部要素）に対してのみハンドラが呼び出されます。 jQueryはイベントをイベントターゲットからハンドラがアタッチされている要素（つまり最も内側の要素から最も外側の要素）までバブリングし、セレクタに一致するそのパスに沿った任意の要素のハンドラを実行します。

委任されたイベントには、後でドキュメントに追加される子孫要素のイベントを処理できるという利点があります。

Answer 2

新しい要素を決して選択しないので、元のものだけが選択されます。セレクターはオリジナルのみを持ち、ライブコレクションではありません。だからあなたはそれらを再選択する必要があります。

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

イベント委任を使用すると、すべてのチェックボックスを選択しないようにすることができます。フォーム上の変更イベントを聞きます。あなたが使用していますがclone(true, true)あなたがそれらにchangeイベントハンドラを追加前の要素をクローニングしているので

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

Answer 3

問題があります。あなただけの周りのロジックを交換する必要があります。

$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に割り当てると、変更機能を追加したときに変数にはそのチェックボックスだけが保持されます。

forループの前にchange-functionを置くと、すべてが正常に動作します。

Answer 5

オブジェクトがcloneの場合、オブジェクトのみが複製されます。そして彼らの出来事ではない。イベントは元のオブジェクトにバインドされているため（クローンを作成する前に、使用されたjQueryセレクタに基づいて）

彼の答えで言及されているように、あなたはドキュメントレベルでイベントを開催する必要があります。

たとえば、あなたがこのようにjQueryのセレクタを使用してイベントをバインドするとき、私のDOMは今3つの入力のチェックボックス

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

が含まれているとしましょう、注意すべき

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

物事、このjQueryのセレクタがどのDOM要素の配列を返すことですその瞬間にのページに存在します。。そして、onchangeイベントがそれぞれに登録されます。既存の各DOMにイベントをバインドするのと同じです（この場合、3つのチェックボックス）