admin管理员组文章数量:1291188
I'm trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I've put together a barebones example to demonstrate:
Index.html:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav a').click(function()
{
$('#contentHolder').load('content.html #toLoad', '', function() {});
return false;
});
});
</script>
</head>
<body>
<div id="nav">
<a href="content.html">Click me!</a>
</div>
<hr />
<div id="contentHolder">
Content loaded will go here
</div>
</body>
</html>
Content.html:
<div id="toLoad">
This content is from content.html
<div id="contentDiv">
This should fade away.
</div>
<script type="text/javascript">
$('#contentDiv').fadeOut('slow', function() {} );
</script>
</div>
When the link is clicked, the content should load and the second paragraph should fade away. However it doesn't execute. If I stick a simple alert("") in the script of content.html it doesn't execute either.
However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don't want to avoid using the selector, as in reality the content.html will be a full HTML page, and I'll only want a select part out of it.
Any ideas? If the script from content.html was in the .load() callback, it works fine, however I obviously don't want that logic contained within index.html.
I could possibly have the callback use .getScript() to load "content.html.js" afterwards and have the logic in there, that seems to work? I'd prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn't work.
I'm trying to load one page into another using the .load() method. This loaded page contains a script that I want to execute when it has finished loading. I've put together a barebones example to demonstrate:
Index.html:
<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#nav a').click(function()
{
$('#contentHolder').load('content.html #toLoad', '', function() {});
return false;
});
});
</script>
</head>
<body>
<div id="nav">
<a href="content.html">Click me!</a>
</div>
<hr />
<div id="contentHolder">
Content loaded will go here
</div>
</body>
</html>
Content.html:
<div id="toLoad">
This content is from content.html
<div id="contentDiv">
This should fade away.
</div>
<script type="text/javascript">
$('#contentDiv').fadeOut('slow', function() {} );
</script>
</div>
When the link is clicked, the content should load and the second paragraph should fade away. However it doesn't execute. If I stick a simple alert("") in the script of content.html it doesn't execute either.
However, if I do away with the #toLoad selector in the .load() call, it works fine. I am not sure why this is, as the block is clearly in the scope of the #toLoad div. I don't want to avoid using the selector, as in reality the content.html will be a full HTML page, and I'll only want a select part out of it.
Any ideas? If the script from content.html was in the .load() callback, it works fine, however I obviously don't want that logic contained within index.html.
I could possibly have the callback use .getScript() to load "content.html.js" afterwards and have the logic in there, that seems to work? I'd prefer to keep the script in content.html, if possible, so that it executes fine when loaded normally too. In fact, I might do this anyway, but I would like to know why the above doesn't work.
Share Improve this question edited Sep 16, 2009 at 7:51 Kasaku asked Sep 15, 2009 at 22:19 KasakuKasaku 2,19216 silver badges26 bronze badges 1- As an update to this, I am fairly confident in the real representation of this I will call content.js after loading content.html (and content.html can statically reference this js file too). However I still think the above behavious isn't working as intended, and would like to understand if this is a problem in my JS or if it is a jquery bug? – Kasaku Commented Sep 17, 2009 at 11:34
5 Answers
Reset to default 4If you look at the jquery source, you will see that the .load() method simply removes all scripts from the loaded content (if a selector was specified).
jQuery.ajax({
url: url,
type: type,
dataType: "html",
data: params,
plete: function( res, status ) {
// If successful, inject the HTML into all the matched elements
if ( status === "success" || status === "notmodified" ) {
// See if a selector was specified
self.html( selector ?
// Create a dummy div to hold the results
jQuery("<div />")
// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(res.responseText.replace(rscript, ""))
// Locate the specified elements
.find(selector) :
// If not, just inject the full result
res.responseText );
}
if ( callback ) {
self.each( callback, [res.responseText, status, res] );
}
}
There may be some restrictions on scripts executed from externally loaded content. Some of the Ajax functions will do it, some might not. For some irrational reason, I expect using .load() with a content selector to not execute scripts. This is probably some undocumented, but intentional, behavior.
Remember, you can always use a callback function with .load() that invokes .getScript().
Why calling the JS is the load callback? That would be cleaner
Try executing that function on document ready
<script type="text/javascript">
$(document).ready(function(){
$('#contentDiv').fadeOut('slow', function() {} );
})
</script>
Could be because JS is trying to execute the function while still generating the DOM. IMO, this approach isn't very good to begin with. It's like accessing public variables in private functions.
Why is toLoad in a separate document? I would just put toLoad and its children in index.html and set them display:none in your stylesheet, then attach the jQuery show() and hide() functions to an onclick handler to make things appear or disappear.
本文标签： javascriptJqueryLoading a page with load and selector doesn39t execute scriptStack Overflow
版权声明：本文标题：javascript - Jquery - Loading a page with .load and selector doesn't execute script? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741526560a2383502.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论