2016-03-05 135 views
1

我設置了以下的JSFiddle。目前,我有三個div,每個div都有自己的輸入。每個輸入都有一個複選框,可以在其中添加另一個輸入。如果未選中,則輸入會再次被刪除。代碼爲JQuery,多次克隆div

$(function() { 
    $('input:checkbox[name="labelNewline"]').change(function() { 
    if ($(this).is(':checked')){ 
     var clone = $(this).parent().siblings(".labelAndInput").first().clone().insertAfter($(this).parent()); 
     clone.addClass('clone'); 
    } else { 
      $(this).parent().siblings(".clone").remove(); 
    } 
    }); 
}); 

我正在嘗試做其他事情。如果添加了新行,則新輸入也應該具有添加新輸入的複選框。所以我不再想限制這隻有一個輸入被添加。但是,如果未選中某個輸入的複選框,則應刪除其相關輸入。

會是這樣的事情嗎?

謝謝

回答

2

是的,這是可能的。

這裏的工作小提琴:

注意

https://jsfiddle.net/yvnyk69v/1/

事情:

$("#testingContainer").delegate('input:checkbox[name="labelNewline"]', 'change', function() { 

委託函數是在這種情況下非常有用。它做了什麼它需要一個元素,並且會將一個事件處理程序應用於與委託函數中指定的選擇器相匹配的任何元素,即使在代碼已經運行之後添加它也是如此。

界面非常簡單,所以我可以將元素定位到next和previous。如果它變得更加複雜,您可能需要添加一個屬性或類以更容易地識別相應的輸入。