動的に追加されたチェックボックスでSwitcheryを有効にする

Question

テーブルに行を動的に追加しています。各行にはチェックボックスがあります。私はスイッチャーを使ってスタイリングを変えたいと思っています。私の問題は、最初の行を追加するとコードがうまく動作することです。 2番目の行を追加すると、最初のチェックボックスに2回目の切り替えが追加されたようです。 2行目のチェックボックス（つまり、追加されたばかりのチェックボックス）は、スイッチャーチェックボックスに正しく変換されます。

jQuery(document).on('click', '.add-product-from-modal', function() {   

    $('#product-list').append('<tr><td>Product Name</td><td>1</td><td><input name="isDelivery[]" class="switchery" value="1" type="checkbox"/></td><td><input name="deliveryDate[] "type="text" style="display: none" class="form-control deliveryDate"></td><td>&pound;1</td><td>TBC</td></tr>');        

    var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery')); 

    elems.forEach(function(html) { 
     var switchery = new Switchery(html, {size: 'small'}); 
    }); 

    return false; 

}); 

最初の行...

2列目..

あなたはhttps://jsfiddle.net/9puL9je1/でフィドルとしてこれを見ることができます - クリックして "新しい行を追加するo私が話していることを参照してください

Answer 1

私はあなたのコードをいくつか修正します。基本的に私は、queryselectorで見つけた各要素を常にすべてのDOMから取得します。なぜそれは常に重複しているのですか？私はインデックスのように新しい行ごとにidを入れて、新しい行ごとに作成します。

私は以下のコード変更を入れて、この助けを願っています。ここで

var count = 0; 
jQuery(document).on('click', '.add-product-from-modal', function() {   

    $('#product-list').append('<tr><td>Product Name</td><td>1</td><td><input name="isDelivery[]" id="'+count+'" class="switchery" value="1" type="checkbox"/></td><td><input name="deliveryDate[] "type="text" style="display: none" class="form-control deliveryDate"></td><td>&pound;1</td><td>TBC</td></tr>');  

    var elems = document.getElementById(count); 
    var switchery = new Switchery(elems, {size: 'small'}); 
    count++; 

    return false; 

}); 

はsample