jquery toggle() Problem in geklonten Inhalt

Question

Ich habe eine Klasse, die geklont wird, so dass mehrere Eingaben vorgenommen werden können. Darin befindet sich ein Problembereich mit ausgeblendetem Inhalt, den ich beim Klicken auf die Schaltfläche "Ja" anzeigen möchte. Momentan funktioniert diese Umschaltung nicht. Ich nehme an, es hat etwas damit zu tun, innerhalb der geklonten Klasse zu sein, aber ich weiß nicht genug, um zu verstehen, warum. Beispiel hier: 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

Das ist, weil, wenn Sie die Event-Handler registrieren, wird die Zeile noch nicht hinzugefügt.

Ändern Sie die Reihenfolge und es wird funktionieren.

$(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(); 
    }); 

}); 

Hinweis: clone als solche nicht Event-Handler

Answer 2

verwenden Sie die folgende Syntax, um dynamisch zu ändern

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

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