jquery is not working on ajax loaded content

Question

$(document).ready(function(){
    $(".click").on('click', function(){
        var target = $(this).parent().children(".expand");
        $(target).slideToggle();
    });
});

HTML content loaded by AJAX:

<div class="click" >...div with expand ....</div>
<div class="click" >...div with expand ....</div>

Can any one correct my code? Thanks in advance!

are `
` loaded with ajax or content inside it loads with ajax? — Bhushan Kawadkar, Mar 25 '15 at 10:06

score 1 · Answer 1 · edited May 23 '17 at 10:10

1

<div class="click"></div> is dynamically created element so we need to use the event delegation here.

Reference: Event binding on dynamically created elements?

Try This,

$(document).on('click', '.click', function(){
    // Do something
});

edited May 23 '17 at 10:10

Community

1
1

answered Mar 25 '15 at 10:06

Rakesh Kumar

2,705
1
19
33

Not sure why you were downvoted as this is the correct answer. – Rory McCrossan Mar 25 '15 at 10:10
m also confused why I get downvote...dear downvoter pls explain – Rakesh Kumar Mar 25 '15 at 10:12
Yeah I had a correct answer with -1... People ... Here you're +1 for the record – Michael Laffargue Mar 25 '15 at 10:12
Awesome thanks you so much working fine!! if possible can you please explain y – user3598375 Mar 25 '15 at 10:19
@user3598375: This is because the event handler needs to be attached to some `DOM`-element that is present when the page loads, here `document` (but could have been `'body'` or else). The second argument provide the very element on which you want to bind the event. – D4V1D Mar 25 '15 at 10:21

jquery is not working on ajax loaded content

1 Answers1