在動態添加複選框上啓用切換

我正在動態地向表中添加行。每行內都有一個複選框。然後我想用切換臺來改變樣式。我的問題是，當我添加第一行時，我的代碼很好地工作。當我添加第二行時，切換似乎第二次添加到第一個複選框。第二行（即剛剛添加的那一行）的複選框被正確轉換爲切換盒複選框。在動態添加複選框上啓用切換

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/小提琴 - 點擊「添加一個新行「t o看看我在說什麼

來源

2017-07-30 Chris

。請 –

是的，只是將它添加到我的問題 – Chris

一個簡單的修復：https：//jsfiddle.net/9puL9je1/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; 

});

這裏是小提琴更新sample

可能你把plnkr或小提琴

來源

2017-08-01 23:58:40

這很好，謝謝。一旦網站允許，我會盡快給予賞金... – Chris

在動態添加複選框上啓用切換

回答

相關問題