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);

});