How do I trigger jQuery .click() after replacing content?

Question

My HTML looks like this

<div id="current">&nbsp;</div>

<div class="data1">
  <div class="foo"><p>Some Text</p></div>
</div>

<span onclick="replace()">Click to replace div</span>

My JQuery/javascript is like this

$(document).ready(function() {
  $('.foo').click(function() {
    alert('worked');
  })
})

function replace() {
   $('#current').html($('.data1').html());
}

The alert triggers fine on the .foo class within the .data1 div but after replacing the contents of #current with .data1, the onclick event doesn't trigger on the .foo class within the first div.

What am I missing? Any help would be appreciated!

Karl-André Gagnon · Accepted Answer · 2014-10-14 14:24:20Z

3

Using .html() will create new HTML element but the event will not follow. You need to append a DOM element. The DOM element should be a clone of the original:

$('#current').empty().append($('.data1').clone(true));

answered Oct 14, 2014 at 14:24

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andreas Furster Over a year ago

This is exactly the same as $('#current').html($('.data1').html());

Spokey Over a year ago

@AndreasFurster the difference to note is that one inserts a HTML String and the other one a DOM element with the handlers.

Karl-André Gagnon Over a year ago

@AndreasFurster no its not, .html() take the text content. This mean that the event will not follow. append will use the DOM element itself with all the data that come with it. Using clone will duplicate the element instead of moving it and passing true as parameter mean it's passing the Event data of the element and all its childrens.

Amit Joki · Accepted Answer · 2014-10-14 14:23:39Z

1

Since you're dynamically appending the element, use event-delegation

$('div').on('click', '.foo', function() {
  alert('worked');
})

answered Oct 14, 2014 at 14:23

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

2 Comments

Lee Taylor Over a year ago

+1 Agreed. Event delegation is more "obvious" in what is happening and no additional coding required.

Amit Joki Over a year ago

@LeeTaylor yup :) Thanks BTW

Collectives™ on Stack Overflow

How do I trigger jQuery .click() after replacing content?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related