Not in the 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 cannot get it), which means it is not available instantly.

How to do it right?

Answer 1

If you intend to work with returned elements, you must do this in the callback function because the HTML extraction is performed asynchronously and the callback function is executed when the request is completed and the elements are entered into the DOM:

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

, clonning #loader, DOM, , , ...