jQuery function not working with data that has been loaded with Ajax

Question

When user clicks a link, it runs $.post to retrieve some data and display it. One of the links pulls a table of sessions with a button next to every session. Here is the code for one of the buttons:

<button class="view_session btn btn-info" id="3f87d50493698d06b9b48abe36cd8fc8">Details</button>

And here is my jQuery function:

$('.view_session').click(function(){
    $('#blanket').show();
    $('#load').show();
    $.post("admin/session.php", { id: $(this).attr('id') }, function(data){
        $('#sort').html(data);
        $('#first').hide();
        $('#load').hide();
        $('#blanket').hide();
    }); 
});

But nothing happens. I put in a Console.log to test and nothing triggered. Is there something I have to do because the button is being created after the page loads initially?

Answer 1

If you are dynamically adding the button, .click will not bind to it unless it is already there. You either need to bind after the button is added to the DOM or use delegation, like this:

$(document).on('click', '.view_session', function () {

(a more specific selector than document would be nice).

Other than that, the third argument as a function to $.post only occurs on success. You can use the deferred interface methods to check for failure and completion as well:

$.post(...).then(success).fail(failure).done(complete);

Answer 2

Is there something I have to do because the button is being created after the page loads initially?

Yes.

The reason for this is that handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the binding occurs.

The solution is that you either have to re-bind the event manually to the element ones it has been added or bind the event using delegation.

For jQuery 1.7 or later use on() with delegation:

$("#YourclosestStaticElement").on("click", ".view_session", function () {
   //... same code as before
}

For jQuery 1.4.3 up-to/including 1.6 use delegate() :

$("#YourclosestStaticElement").delegate(".view_session", "click", function () {
   //... same code as before
}

For jQuery 1.3 up-to/including 1.4.3 live() would be the only way, aside from re-binding manually:

$(".view_session").live("click", function () {
   //... same code as before
}

In addition there is a whole lot of reasons why live() was depracated, among the fact that it always bubbles up to the document before triggering the event, meaning stopPropogation() can become an issue for example.

The whole list of reasons is also in the live() documentation.

To quote from the documentation :

• $(selector).live(events, data, handler); // jQuery 1.3+
• $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
• $(document).on(events, selector, data, handler); // jQuery 1.7+