JQuery Ajax Binding

Question

Below is the simple code that should display Ajax loading animation when form is submitted:

var init = function() {
    $("form").bind('ajax:beforeSend', function() {
        $("#comments_loading").show();
    });

    $("form").bind('ajax:complete', function() {
        $("#comments_loading").hide();
    });
};

$(document).load(init);

It's purpose is to display the loading animation on Ajax request. It works perfectly, but... only for the first form submit!!! Any suggestions why/how can this be addressed can be much appreciated.

Thanks a lot.

Answer 1

Use jquery .on instead. Same syntax, different method name:

$("form").on('ajax:complete', function() {
    $("#comments_loading").hide();
});

Because I am assuming that your ajax loaded form is not the exact same element as your original form