on('click', function() doesn't work on new content

Question

HTML

<div id='story'>    
    <div class='item folder'>sky</div>
    <div class='item folder'>sea</div> 
</div>

JS

$(".item").on('click', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

This works but now the the content of #story is replaced using ajax procedure:

...    
success: function(data) {
    $('#story').html(data);
}

And the new content is:

<div class='item folder'>earth</div>
<div class='item folder'>venus</div>

And here on('click', function() doesn't work. Classes are not removed/added.

score 3 · Accepted Answer · answered Jan 12 '17 at 09:07

3

Event delegation does the trick:

$('body').on('click', '.item', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

answered Jan 12 '17 at 09:07

RWAM

6,760
3
32
45

Thanks a lot. Solved. – qadenza Jan 12 '17 at 09:15

score 2 · Answer 2 · answered Jan 12 '17 at 09:08

2

Use event delegation for dinamically added elements:

$(document).on('click', '.item', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

You can read more here.

answered Jan 12 '17 at 09:08

Ionut Necula

11,107
4
45
69

score 0 · Answer 3 · answered Jan 12 '17 at 09:08

0

Click binding only work for html elements, which are available in the DOM at the time click is called. You have to bind a new click listener after you add something to the DOM.

answered Jan 12 '17 at 09:08

ppasler

3,579
5
31
51

on('click', function() doesn't work on new content

3 Answers3