Я не могу выбрать элемент, созданный динамически для клона после

Question

Проблема проста, я не могу выбрать динамически созданный элемент.

Поскольку я не могу выбрать, я не могу клонировать с пунктирными границами.

Мое изображение приложения:

Я не могу выбрать элемент, созданный динамически

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>