Question

I have two ajax functions that fetch JSON objects using .getJSON and then build a table and drop-down menu using the contents of those objects. This much is working fine. Now I’m attempting to attach an event to each of the checkboxes located in the first column of the table. Naturally I want this to happen after the ajax calls are done. JQuery’s .when() function seems like a good solution in that it will wait until both ajax functions are complete. Below is my code. I’m not sure what I did wrong. For some reason the alert inside of the .when function does not fire. Can someone point out what I’ve done wrong?

$(document).ready(function () {

$.when(createSpotsTable(), createMarketDropDown(1))
$('input:checkbox').click(function () {
    $('input:checkbox').change(
       alert("Hello world!")
    );
});

});

Answer 1

It seems your code is missing some things. For example you are not registering any callback to the object returned by $.when. That means, no code will be executed when the Ajax calls finish. Instead, the $('input:checkbox').click(...) will be executed immediately.
Maybe you thought $.when is blocking the execution, but it is not. Have a look at the documentation.

Furthermore, you are assigning the return value of alert as event handler, but you have to pass a function to .change.

I think what you want is:

$.when(createSpotsTable(), createMarketDropDown(1)).done(function() {
    $('input:checkbox').change(function () {
       alert("Hello world!")
    });
});

But you don’t have to use $.when, you can just make use of event delegation:

createSpotsTable();
createMarketDropDown(1);

$(document).on('change','input:checkbox', function () {
    alert("Hello world!")
});