克隆內容中的jquery toggle（）問題

Question

我有一個正在克隆的類，因此可以完成多個輸入。在這裏面是一個問題區域，其中隱藏了我想要顯示的按鈕上的內容。目前這個切換不起作用。我假設它與克隆類內部有關，但我不知道爲什麼。 例這裏：https://jsfiddle.net/484u32qn/6/

$(document).ready(function() { 
    $(".issuesshow").click(function() { 
    $(".plantarea").toggle(); 
    }); 

    $(".ft1issues").click(function() { 
    $(".ft1area").toggle(); 
    }); 

    $(".ft2issues").click(function() { 
    $(".ft2area").toggle(); 
    }); 

    $('.button-add').click(function() { 
    //we select the box clone it and insert it after the box 
    $('.box.assembly').clone().show().removeClass("assembly").insertAfter(".box:last"); 
    }).trigger("click"); 

    $(document).on("click", ".button-remove", function() { 
    $(this).closest(".box").remove(); 
    }); 

}); 

Answer 1

這是因爲當你註冊的事件處理程序，尚未添加的行。

更改順序，它會工作。

$(document).ready(function() { 
    $('.button-add').click(function() { 
    //we select the box clone it and insert it after the box 
    $('.box.assembly').clone().show().removeClass("assembly").insertAfter(".box:last"); 
    }).trigger("click"); 

    $(".issuesshow").click(function() { 
     $(".plantarea").toggle(); 
    }); 

    $(".ft1issues").click(function() { 
     $(".ft1area").toggle(); 
    }); 

    $(".ft2issues").click(function() { 
     $(".ft2area").toggle(); 
    }); 

    $(document).on("click", ".button-remove", function() { 
     $(this).closest(".box").remove(); 
    }); 

}); 

注：clone因此將不會複製事件處理程序

Answer 2

使用下面的語法來動態改變

$(document).on('click', '.issuesshow', function(){ 
      $(this).closest('.prodchild').find('.plantarea').toggle(); 
    }); 

https://jsfiddle.net/484u32qn/13/

中的jsfiddle