为事件jQuery选择特定的新附加节点副本

Posted 2021-03-29

由于javascript的复杂语法，我正在转向jQuery。我写了一个JQ脚本来复制并附加一个div及其事件监听器。它应该打开一个按钮的内容，并能够删除与其内容相同的按钮。但是，打开内容对所有复制的元素都这样做，删除div仅对顶部div执行此操作。有人可以帮忙解决这个问题吗？

$(document).ready(function() {
  $(".test2").click(function() {
    $("#samplesinfo").clone(true).insertAfter("#paste");
  });
  $(".accordion").click(function() {
    $(".panel").toggle();
  });
  $(".delbtn").click(function() {
    $("#samplesinfo").remove();
  });
});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div id="samplesinfo">
  <div class="test">
    <button class="delbtn" id="delbtn" style="float: right;">Delete</button>
    <button id="sample" class="accordion" style="float: left;">Button</button>
    <div id="usrInput" class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>
<div id="paste">
</div>

此外，每个按钮都包含用户输入选项。应该使用不再需要的特定用户输入来删除div。例如，如果您在第三个复制元素中输入“hello”并按下删除按钮，它应该只删除表示“hello”的元素，而不是从顶部删除。

答案

在另一个答案中，当您“添加”时，它会复制第一个，包括input内容（如果您输入的话）。

我经常喜欢使用隐藏模板，所以我建议你这样做：

• 从class="hidden"开始只使用一个元素。这是“模板”。
• 单击“添加”时，“模板”将被复制，可见，并在最后一个元素后追加。
• 在加载时，我们触发click事件以一个可见元素开始。
• 因为你应该避免内联样式，我也把它移到CSS。

工作片段：

var index = 0;
$(".test2").click(function() {
  var element = $(".samplesinfo.hidden").clone(true);
  element.removeClass('hidden').insertAfter(".samplesinfo:last");
  element.find('.delbtn').text('Delete ' + ++index);
});

$(".accordion").click(function() {
  $(this).next(".panel").toggle();
});

$(".delbtn").click(function() {
  $(this).closest(".samplesinfo").remove();
});

// Trigger click on load
$(".test2").trigger('click');

.hidden{
  display: none;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  float: left;
}

.delbtn {
  float: right;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div class="samplesinfo hidden">
  <div class="test">
    <button class="delbtn">Delete</button>
    <button class="accordion">Button</button>
    <div class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>

另一答案

html中的标识符必须是唯一的。在示例中，我使用了CSS类。您需要在当前元素中定位元素，即this上下文

$(document).ready(function() {
  $(".test2").click(function() {
    var element = $(".samplesinfo:first").clone(true);
    
    element.insertAfter(".samplesinfo:last");

    //Get all delbtn
    var delbtns = $('.delbtn');

    //get last elements index
    var index = delbtns.index(delbtns.last()) + 1;

    //set Text
    element.find('.delbtn').text('Delete' + index)
  });
  
  $(".accordion").click(function() {
    $(this).next(".panel").toggle();
  });
  $(".delbtn").click(function() {
    $(this).closest(".samplesinfo").remove();
  });
});

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.close {
  float: right;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #f44336;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>Example</h2>
<button class="test2">ADD</button>

<div class="samplesinfo">
  <div class="test">
    <button class="delbtn" style="float: right;">Delete</button>
    <button id="sample" class="accordion" style="float: left;">Button</button>
    <div id="usrInput" class="panel">
      <input type="text" name="test">
    </div>
  </div>
</div>
<div class="paste">
</div>

以上是关于为事件jQuery选择特定的新附加节点副本的主要内容，如果未能解决你的问题，请参考以下文章

jquery组件ztree问题：为啥添加新节点时会自动添加2个以上的新节点

JQuery获取append后的动态元素：live()和on()

如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？

jQuery mobile：当我将选择菜单附加到不同页面上的另一个 DOM 节点时，为啥会中断？

如何获取jQuery中动态添加的元素

用jq创建出来的虚拟DOM应如何添加事件