在动态添加的复选框上启用 Switchery

Question

我正在向 table 动态添加行。每行内都有一个复选框。然后我想使用 switchery 来改变样式。我的问题是，当我添加第一行时，我的代码运行良好。当我添加第二行时，开关似乎第二次添加到第一个复选框。第二行的复选框（即刚刚添加的复选框）已正确转换为切换复选框。

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;

});

第一行...

第二行..

您可以在 https://jsfiddle.net/9puL9je1/ 将其视为 fiddle - 单击 "Add a new row" 了解我在说什么

Answer 1

我对你的代码做了一些修改。基本上我用查询选择器总是从所有 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;

});

这是 fiddle 更新的 sample

在动态添加的复选框上启用 Switchery

Enabling Switchery on dynamically added checkboxes

javascript

jquery

switchery