Я пытаюсь загрузить одну страницу в другую, используя метод .load (). Эта загруженная страница содержит скрипт, который я хочу выполнить после завершения загрузки. Я собрал простой пример, чтобы продемонстрировать:
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>
Когда ссылка нажата, контент должен загрузиться, а второй абзац должен исчезнуть. Однако это не выполняется. Если я вставлю простое предупреждение ("") в скрипт content.html, оно тоже не будет выполнено.
Однако, если я покончу с селектором #toLoad в вызове .load (), он будет работать нормально. Я не уверен, почему это так, поскольку блок явно находится в области действия #toLoad div. Я не хочу избегать использования селектора, так как на самом деле content.html будет полноценной HTML-страницей, и мне понадобится только выбранная часть из нее.
Есть идеи? Если скрипт из content.html находился в обратном вызове .load (), он работает нормально, однако я, очевидно, не хочу, чтобы эта логика содержалась в index.html.
Возможно, я мог бы использовать функцию обратного вызова .getScript () для загрузки потом «content.html.js» и иметь там логику, которая, кажется, работает? Я бы предпочел сохранить скрипт в файле content.html, если это возможно, чтобы он нормально работал при нормальной загрузке. На самом деле, я мог бы сделать это в любом случае, но я хотел бы знать , почему выше не работает.