jQuery链接的AJAX回调函数

Question

I have a centralized ajaxSuccess callback function that should initialize components returned by various AJAX calls around the project, something like this:

$(document).ajaxSuccess(function (response, status, xhr) {
    initComponents();
});

So the module-level ajax call could just be like:

$.ajax({
   url: "whatever",
   success: function(data) {
        // Do some stuff to update the DOM, like:
        $("container").html(data);
   }
});

without the need to perform the init of the eventual components I've in the returned HTML.

Now I've this issue: if the local ajax callback function is HUGE, I mean, if it performs a really heavy manulation of the DOM, it happens that the global ajaxSuccess function is fired BEFORE the elements returned by the call are placed in the DOM and available for jQuery.

That's because the callback functions are not chained, just exectuted in sequence (I think).

There is a way to be sure to perform the global ajaxSuccess after the local success callback function is completed?

Or, there is a better way to manage these behaviours?

UPDATE: Doing some logging I'm pretty sure the HTML is in place BEFORE we even entry on the global ajaxSuccess. The issue still remains, anyway, as specific jQuery selectors used in the initComponents() function is not retrieving the elements injected in the DOM.

If I perfom the initComponents() inside a setTimeout callback, it is working.... but I don't want to use a timeout...

It's like the updated DOM is not yet queryable when ajaxSuccess fires.

UPDATE 2: False alarm. Actually the update of the html was inside a fadeOut callback function that was making it async in relation of other functions... My fault.

Answer 1

尝试将global：true属性添加到$ .ajax对象。