jQuery使用$ {document）加载外部JavaScript.ready失败

Question

I would like to load an external HTML. In addition, the external HTML contains some JavaScript code. Since the load function does not load this script, I have to use getScript:

<div id="external-content"></div>

<script type="text/javascript">
  $("#external-content").load("external.html #myid", function() {
    // do something
  });
  $.getScript("external.js");
</script>

That works like a charm unless the external.js has a $(document).ready command, which tries to access elements from external.html. It seems to me, that the event is fired too early. I also tried to put the command $.getScript("external.js"); into the .load callback, but did not succeed. Note that sing external.html separately and including the external.js directly works like expected.

Answer 1

Unfortunately, the timing of this makes sense (ie. this is correct behaviour). The script inside the tag fires up a retrieval of external.html and does not wait for it to return, it keeps moving on to the retrieval of external.js. In the meantime, the 'base' document is still loading and may (in fact probably) will complete before externa.html is retrieved.

So, you can run into a timing situation whereby:

Document is indeed ready (external.html being loaded is not a condition of the DOM being scriptable), external.js is loaded and available, but external.html hasn't been fully loaded yet. The document ready function will fire (because the document IS ready!) before the elements of external.html are present.

If you want to continue this approach, there are probably ways to rejig it such that you are using on() inside external.js to delegate to a listener to the base document (#myid) for events on elements inside external.html.