CODEWITHSUNDEEP
javascriptjquery
lipenco
lipenco

Reputation: 1368

copy existing event handler to new appended div

I want to create new element on clicking on '.new' element, my jQuery works but button '.new' in newly created element is not clickable, and cannot create next element. How can I fix it. I guess I cannot just use .copy(true) , because the element is not exactly the same - the h2 is not copied.

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

This is my jQuery which doesn't pass the function to .new element:

$('.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);        
});

Upvotes: 0

Views: 106

Answers (1)

adeneo
adeneo

Reputation: 318252

delegated event handlers:

$(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);        
});

Upvotes: 1

Related Questions