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

时间:2018-06-08 12:26:18

标签: jquery html events

由于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”的元素,而不是从顶部删除。

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
$(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();
  });
});
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

在另一个答案中,当您“添加”时,它会复制第一个内容,包括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>

请注意id必须是唯一的 当您想要相对于当前元素(触发en事件的元素)定位元素时,this是一个强大的关键字。

⋅ ⋅ ⋅

这是一个JavaScript版本......

事件监听器不是用JavaScript复制的,所以每次添加新元素时我们都需要调用一个函数!...

段:

var index = 0;
var template = document.querySelector(".samplesinfo.hidden");

document.querySelector(".test2").onclick = function() {
  var element = template.cloneNode(true);
  element.classList.remove('hidden');
  element.querySelector('.delbtn').innerText = 'Delete ' + ++index;
  var samples = document.querySelectorAll(".samplesinfo");
  var last = samples[samples.length - 1];
  last.parentNode.insertBefore(element, last.nextSibling);
  refresh_listeners();  
}

// Event listeners are not copied with JavaScript, so we need to call this function each time we add a new element!…
function refresh_listeners() {
  document.querySelectorAll(".accordion").forEach(function(elm) {
    elm.onclick = function() {
      elm.nextElementSibling.classList.toggle("hidden");
    }
  });
  document.querySelectorAll(".delbtn").forEach(function(elm) {
    elm.onclick = function() {
      elm.closest(".samplesinfo").outerHTML = '';
    }
  });
}

// Trigger click
document.querySelector(".test2").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;
  background-color: white;
  overflow: hidden;
}
<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 hidden">
      <input type="text" name="test">
    </div>
  </div>
</div>

希望它有所帮助。