JQuery load doesn't seem to process ?

问题

I'm loading a page like this:

 function loadGUIComponents() {
// load contents into each accordion area
$("#listEntryDiv").load("listEntry/listEntryIndex.html");
$("#openEntryDiv").load("openEntry/openEntryIndex.html");
 };

In listEntryIndex.html, scripts like this can be called right:

<script>
alert("AHA!");
</script>
<h1>the world is helloed.</h1>

But if I try to externalize JS into a separate file:

<script type="text/javascript" src="listEntryIndex.js"></script>
<h1>the world is helloed.</h1>

The script will never be called. I really have googled a lot and am not getting the reason. People are asking why their javascripts are not called after being loaded, but mine is why only the tag is not called after being loaded. Thanks!

回答1:

It's not jQuery load that's the problem, fundamentally that works: Live example That example is using this code:

$("#target").load("http://jsbin.com/oqefe4");

To load this file:

<p>Test</p>
<script src='http://jsbin.com/ewexi4'></script>

...which references this one:

alert("Hello");

(I used full paths in the above, but here's a version with relative paths; that works fine as well.)

This suggests that the actual problem lies elsewhere. You'll have to step through with a debugger to see what's going on. Fortunately, just about every browser has one built in these days and there are free options for those that don't.

Update: You might have an issue with relative paths. When the text from your HTML file is loaded into the current document, paths within script (and img, etc.) tags in that HTML text will be resolved relative to the current document's location, not the location of the document you're loading. I'd look for 404 errors in the debugger, it's probably a path problem. This thought was triggered by a now-deleted comment on the question by @Darth___ (I think there was more to it) which questioned the paths... (Edit: It was DarthJDG; he's now posted that as an answer. I bet it's the right one.)

So specifically, say your main document is at

http://example.com/foo/maindocument.html

Your load call is loading listEntry/listEntryIndex.html and openEntry/openEntryIndex.html, and those will be:

http://example.com/foo/listEntry/listEntryIndex.html
http://example.com/foo/openEntry/openEntryIndex.html

If the HTML within those has the script tag you listed, listEntryIndex.js, it will be resolved relative to maindocument.html, not relative to listEntryIndex.html, and thus:

http://example.com/foo/listEntryIndex.js

not

http://example.com/foo/listEntry/listEntryIndex.js

回答2:

You have to make sure you reference your script in the src attribute correctly. From the above example, I'm assuming the current file structure:

./currentPage.html
./listEntry/listEntryIndex.html
./listEntry/listEntryIndex.js
./listEntryIndex.js <------------ //This file doesn't exist.

When you're loading content from a file at a different location, scripts included using relative paths might not be found. You should either copy the scripts or symlink them to make them locally accessible or use absolute paths.

回答3:

Try this :

$.ajax({
  url: "listEntry/listEntryIndex.html",
  dataType: "script",
  success: function(data){
    $("#listEntryDiv").html(data);
  }
});

$.ajax({
  url: "openEntry/openEntryIndex.html",
  dataType: "script",
  success: function(data){
    $("#openEntryDiv").html(data);
  }
});

回答4:

From .load() documentation:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Have you maybe placed the <script> tag inside <head> and the browser strips it? Maybe play around with <script> tag placement.

来源：https://stackoverflow.com/questions/5880318/jquery-load-doesnt-seem-to-process-script-type-src-a-js

标签

javascript