jQuery .click() not working on dynamic objects added with AJAX

Question

I have a page that displays a button up top with id=button-link. Just after the button there's another div with id of display-content. Upon clicking the button, I'm making an AJAX call that pulls up some content and displays it in the second div. Here's the JavaScript code that I'm using:

$('#button-link').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/someAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

$('#secondButton').click(function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

This works exactly as intended and I'm loading some text and HTML elements in the #display-content div. One of those elements is another button with id #secondButton. When the user clicks that second button, I want to make another AJAX call to a different place and pull different content to display in the #display-content div. This, however, does not work. The jQuery script is on the page, it's loading correctly and the HTML elements are also properly displayed on the page after the first AJAX call but it seems that the #secondButton is not part of the DOM and the click events are not triggered when clicked upon it.

Any idea what is going wrong and how can I register click events for this dynamically added button?

rrk · Accepted Answer · 2015-09-19 19:54:53Z

4

You need to use event delegation.

Note: If the element #secondButton can be added multiple times, this doesn't work. You need to use class for that situation.

For jQuery 1.7 and +

$(document).on('click','#secondButton',function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

For versions before jQuery 1.7

$(document).delegate('#secondButton', 'click',function(event) {
    event.preventDefault();
    $.ajax({
        url: 'site/anotherAction',
        success: function(result) {
            $('#display-content').html(result);
        }
    });    
});

edited Sep 19, 2015 at 19:54

answered Sep 19, 2015 at 19:48

rrk

15.9k4 gold badges32 silver badges49 bronze badges

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

3 Comments

mmvsbg Over a year ago

Yes, that works and as mentioned in the description, it covers elements added in the future as well. Thank you!

rrk Over a year ago

@mmvsbg Note: If the element #secondButton can be added multiple times, this doesn't work. You need to use class for that situation. Because id is supposed to be unique in a page.

mmvsbg Over a year ago

Yes, well aware of that, I'll make sure to have only one #secondButton id. Cheers!

Collectives™ on Stack Overflow

jQuery .click() not working on dynamic objects added with AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related