How can I have $.each wait until a .trigger('click') event loads everything?

Question

Inside a $.getJSON success function, I first trigger another element's click event:

$('#' + data[0].ID).trigger('click');

The triggered click event has its own $.getJSON method to load a bunch of data into divs. The next line after the triggered event:

$.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
}

At first the $.each didn't appear to be doing anything, but I added an alert right after the triggered event. After responding to the alert, the code in $.each shows what it's supposed to.

I'm guessing $.each is running before the click event finishes loading the data.

setTimeout pauses long enough for the click event to load data, but I'd rather not set an arbitrary time:

setTimeout(function() { 
    $.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    }
}, 1000);

I also tried $.when and $.then to no avail (although adding alert before $.each inside $.then creates delay for $.each to work):

$.when($('#' + data[0].ID).trigger('click')).then(function () {
    $.each(data[0].ListEntries, function (key, val) {
        //this relies on the triggered click event 
        //having completely loaded all data!
    })

Answer 1

Tidied up for greater clarity

.trigger() returns a jQuery object so you are denied the option of doing $.when() ... $.then().

On the other hand, .triggerHandler(), will return an object of your choice, thus making it possible to do the deferred trick.

Your code is organised in three functions, simplified below. The call path is 1,2,3 and the all-important return path is 3,2,1.

(1) The highest level (JSON success) function will include the following lines :

function() {
    ...
    $.when($('#' + data[0].ID).triggerHandler('click')).done(function() {
        $.each(data[0].ListEntries, function (key, val) {
            ...
        });
    });
    ...
};

(2) The click handler triggered by (1), will be as follows :

$("img.Button").on("click", function () {
    return GetModels(this.id);//here `return` passes on the jqXHR object, up the return path.
});

(3) And the lowest level function containing the JSON, on which (1) depends, will be of this general form :

function GetModels(id) {
    ...
    var jqXHR = getJSON(function(){...});
    ...
    return jqXHR;//it is vital to retutn the jqXHR object arising from the json call.
}

Notes :

• The return path delivers, as the "promise" argument to the .when() method in (1), the jqXHR object arising from the .getJSON() call in (3). The chained .done() in (1) is thus forced to wait for the jqXHR to be resolved (ie. complete) before firing the function that is provided as its argument.
• The click handler makes no assumptions about how it is invoked. It simply returns the jqXHR object. Thus when invoked with .triggerHandler(), the click handler can have additional behaviour appended to it without affecting the normal click action.
• It would be simpler to call GetModels() directly from (1), cutting out the middle-man (2), which is fine if GetModels() behaviour is uniquely wanted. If, however, (1) needs to be responsive to any future changes to the triggered click handler (2), then the above approach needs to be adopted.

Answer 2

You could use a custom event for this. You could put your $.each in a listener for the event and then your $.getJSON success handler could trigger that event:

$('#x').click(function() {
    var _this = this;
    $.getJSON(url, data, function(data) {
        // do things to data...
        _this.trigger('data-loaded');
    });
});
$('#x').on('data-loaded', function() {
    $.each(...)
});
$('#x').click();

Demo: http://jsfiddle.net/ambiguous/FeYTB/