jquery - 我无法选择为克隆动态创建的元素

Question

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

因为我不能选择，所以我不能克隆带虚线的边框。

我的应用图片:

I can not select element created dynamically

小米代码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>

我的 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

});

小米 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>