クローンされたコンテンツ内で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

あなたはjQueryライブラリが欠落している動的JSFiddleで

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

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