Question

问题很简单，我无法选择动态创建的元素。

由于无法选择，因此无法克隆带有虚线边框的

。

我的应用程序图片：

I can not select element created dynamically

Mi代码HTML：

<ul>
 <li class="a">Hello <button class="clone">Clone</button></li>
 <li class="a">Stack <button class="clone">Clone</button></li>
 <li class="a">Overflow <button class="clone">Clone</button></li>
</ul>

Mi jQuery：

$(function() {
  var wrapper = $("<div class='wrapper' /></div>");
  $(".a").wrap(wrapper);
});

$(document).on("click",".clone",function() { // FUNCTION CLONE <LI ELEMENT>

     //$($(this).parent().parent().html()).insertAfter($(this).parent().parent());//Wrong

      $($(this).parent().parent().html()).clone().insertAfter($(this).parent().parent());//Wrong

});

Mi CSS：

.wrapper {
    position: relative;
    background-color: #ccc;
    padding: 1em;
    margin-bottom: 4px;
    border: 2px dashed black;
}
.clone{
  background: DeepSkyBlue;
  padding: 4px;
  position: absolute;
  right: 10px;
   top: 10px;
}
ul{padding:1em;}

我的在线代码（请参阅以了解内容）：

http://jsfiddle.net/3vcho8jt/

*注意：我的英语不好。

Answer 1

第一个：div不是ul的有效子代，因此将LI包裹在div中是不可以的。而是将样式类添加到LI元素。
而不是简单地使用.closest()来获得按钮最接近的选择器，然后.clone()。比起您可以使用.after()进行插入：

jQuery(function($) { // DOM ready and $ alias secured

  // DIV is not a valid UL child! Add .wrapper class to LI instead
  $("ul li.a").addClass('wrapper');

  $(document).on("click", ".clone", function() {
    var $li = $(this).closest('li'); // Get the closest .wrapper AKA: LI element
    var $clone = $li.clone(); // Create a clone
    $li.after($clone); // Yep
  });

});

.wrapper {
  position: relative;
  background-color: #ccc;
  padding: 1em;
  margin-bottom: 4px;
  border: 2px dashed black;
}

.clone {
  background: DeepSkyBlue;
  padding: 4px;
  position: absolute;
  right: 10px;
  top: 10px;
}

ul {
  padding: 1em;
}

<ul>
  <li class="a">Hello<button class="clone">Clone</button></li>
  <li class="a">Stack<button class="clone">Clone</button></li>
  <li class="a">Overflow<button class="clone">Clone</button></li>
</ul>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

我无法选择之后为克隆动态创建的元素

1 个答案: