jQuery函数不使用已加载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);