Not in DOM after $.load() with jQuery?

Question

var id = 'test';
var dom = $('#loader').clone().load("Views/chatBox.html");
dom.find('span.bn').text(id);

in chatBox.html,there is :

...
<span class="bn">AAA</span>
...

I want to replace "AAA" with "test",but failed(dom.find can't fetch it),which mean it's not available instantly.

How to do it the right way?

Answer 1

If you intend to work with the returned elements, you should do it on the callback function, that is because the retrieving of the HTML is done asynchronously, and the callback function executes when the request has ended and the elements are injected to the DOM :

var id = 'test';
$('#loader').load("Views/chatBox.html", function () {
  $('span.bn', this).text(id);
});

Also note that in your example, you were clonning the #loader element, and the cloned element is not in the DOM yet, you will have to insert it, but I'm not sure if you are really wanting to clone the element...

Answer 2

Great tip. Thanks a lot!!!!