копировать существующий обработчик событий в новый добавленный 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);   
});