Question

I have an MVC application. I am trying to load a model from the server using jQuery’s load. This works perfectly fine. I am now trying to run some JavaScript after all of my views have been loaded. As such, I am introducing jQuery’s deferred promise functionality through use of jQuery .when

My limited understanding of this functionality has lead me to believe that the two bits of code below should run identically. It seems to me that my ‘then’ method is executing too soon, though. I’m not sure how to confirm that.

Old Code (Works):

$('#OrderDetails').load('../../csweb/Orders/OrderDetails', function () {
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
});

Now, I would like to extend that to wait for multiple load events. To keep things simple, though, I am just going to try and wait for OrderDetails:

New Code (Doesn’t Work):

var onDisplayLoadSuccess = function () {
    console.log("Done!");
    console.log('Fieldset legend:', $('fieldset legend'); //Not all found.
    $("fieldset legend").off('click').click(function () {
        var fieldset = $(this).parent();
        var isWrappedInDiv = $(fieldset.children()[0]).is('div');

        if (isWrappedInDiv) {
            fieldset.find("div").slideToggle();
        } else {
            fieldset.wrapInner("<div>");
            $(this).appendTo($(this).parent().parent());
            fieldset.find("div").slideToggle();
        }
    });
};

var onDisplayLoadFailure = function () {console.error("Error.");};

$.when($('#OrderDetails').load('../../csweb/Orders/OrderDetails')).then(onDisplayLoadSuccess, onDisplayLoadFailure);

I do not see any errors fire. I see ‘Done’ print to the console, but the timing seems to be different. Legends which existed on the page prior to calling when/load/then have the click event applied to them, but legends which are loaded from in the view given back by OrderDetails do not have the click event bound to them.

By contrast, the old code’s success function applied the click event to all legends appropriately. Why would this be the case?

Answer 1

To capture events on DOM elements that are added dynamically after binding an Event, you need to delegate it (http://api.jquery.com/on/).

Something like:

$('fieldset').on('click', 'legend', function(){