The load() method's promise is resolved after ajax completes, but before inserting contents.

[bill.barron]

I searched for a duplicate, but couldn't find one. I hope this description and example code is useful. It depends on a test.html file being loaded using the load() function.

The callback of the load() (ajax) function executes after content is loaded AND inserted into the DOM. The promise of the load() function, however, is resolved after the content is loaded, but before it is inserted into the DOM. In addition, the parameters it receives does not contain the data, textStatus or jQXHR object. It seems like the promise resolution and the callback execution should happen under identical conditions and pass along similar data.

$('<div id="test"></div>').appendTo($('body'));

$.when($('#test').load('./test.html', function (responseText, textStatus, XMLHttpRequest) {

console.log('From callback (has content)',this.innerHTML);

})).then(function() {

console.log('From promise (is empty)',this.innerHTML);

});

[dmethvin]

The .load() method doesn't return a promise. ​https://api.jquery.com/load/

Since the jQuery object it returns is not a promise, it's considered to be resolved immediately, and thus you're getting that object as the value.

It's a lot more obvious with a fiddle, which is one reason why we ask for one. ​http://jsfiddle.net/upZ6r/