javascript - 将现有事件处理程序复制到新附加的 div

Question

我想在单击“.new”元素时创建新元素，我的 jQuery 可以工作，但新创建的元素中的“.new”按钮不可点击，也无法创建下一个元素。我该如何解决。我想我不能只使用 .copy(true) ，因为元素不完全相同 - h2 没有被复制。

<div class="step">
    <h2>Some text we don't want to copy</h2>
      <div class="new"><i class="icon-plus"></i></div>
</div>

<div class="step">
    <h2>Some text we don't want to copy</h2>
      <div class="new"><i class="icon-plus"></i></div>
</div>

<div class="step">
    <h2>Some text we don't want to copy</h2>
      <div class="new"><i class="icon-plus"></i></div>
</div>

这是我的 jQuery，它没有将函数传递给 .new 元素：

$('.new').click(function(){
      var newSlideDiv = $('<div class="step slide"><h2>New Step</h2>
      <div class="new"><i class="icon-plus"></i></div>
      </div>');
      $(this).parent().after(newSlideDiv);        
});

Answer 1

委托事件处理程序：

$(document).on('click', '.new', function(){
      var newSlideDiv = $('<div class="step slide"><h2>New Step</h2>
      <div class="new"><i class="icon-plus"></i></div>
      </div>');
      $(this).parent().after(newSlideDiv);        
});