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.
