jquery 克隆内容中的 toggle() 问题

Question

我有一个正在克隆的 class，因此可以完成多个输入。在这里面是一个问题区域，它有隐藏的内容，我想在单击是按钮时显示这些内容。目前此切换不起作用。我假设它与在克隆的 class 中有关，但我不知道为什么。此处示例：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/

jquery 克隆内容中的 toggle() 问题

jquery toggle() issue inside cloned content

jquery

clone

togglebutton