将页面加载到div会导致页面的javascript无法正常工作

时间：2013-05-07 00:06:34

标签： javascript html

我正在通过

将页面加载到div中 
<script>
$(document).ready(function() {
    $("#link").click(function(e) {
        e.preventDefault();
        $("#div").load("page.php");
});
</script>

页面加载但是我在page.php中的javascript没有加载。 这就是我所拥有的：

<script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
$(function() {
    $("#date").datePicker(); 
}); 
</script>

当我在div之外加载page.php时（就像在它自己的选项卡/窗口中一样），页面工作得很好。 （以上是http://jqueryui.com/datepicker）的复制意大利面。

原因是什么？如何解决？

3 个答案:

答案 0 :(得分：2)

您可能只需要更改：

<script>
$(function() {
  $("#date").datePicker(); 
}); 
</script>

到

<script>
  $("#date").datePicker(); 
</script>

因为document.ready事件已经被触发，这是$(function() {告诉它等待的事件。我不确定jquery是否会自动在ajax的内容中运行脚本，如果没有，你可以试试这个（不是必须安全，如果你这样做，请确保你理解eval的安全风险）。 

$("#div").load("page.php", function() {
    $("#div").find("script").each(function(i) {
        eval($(this).text());
    });
});

注意：这将运行如下：

<script>
  $("#date").datePicker(); 
</script>

但不是这样的：

<script>
$(function() {
  $("#date").datePicker(); 
}); 
</script>

同样，第二个等待document.ready事件，该事件已经被解雇。

答案 1 :(得分：2)

永远不会加载您的脚本。它们在装载过程中被剥离。

  

（以上是来自http://jqueryui.com/datepicker/的复制意大利面）

我将假设您的意思是您正在复制该示例源代码的 complete ，其大致如下所示：

<!doctype html>

<html lang="en">
<head>
  <!-- Snipped for brevity: A bunch of script and link elements-->
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>

</body>
</html>

所以你使用jQuery's load function获取此文档并将其放在div中：

$("#div").load("page.php");

加载不合作

根据docs on .load()：

  

jQuery使用浏览器的.innerHTML属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会过滤文档中的元素，例如<html>，<title>或<head>元素。因此，.load()检索到的元素可能与浏览器直接检索文档的内容不完全相同。

根据我自己的经验，这通常意味着.load()只会返回body元素内部的内容，而不会返回body元素本身。换句话说，从上面的示例中，这是实际加载的唯一HTML：

<p>Date: <input type="text" id="datepicker" /></p>

您应该使用浏览器的开发人员工具（F12）在脚本中放置断点并找出实际加载的内容。

你如何正确地做到这一点？

它有两个部分。

第1部分：将资源移到<head>元素

之外

Datepicker代码示例包含<head>中的一些资源。你将不得不把它们放在其他地方。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

链接元素

您正在加载的页面无法加载这些内容。将那些放在您尝试加载另一个的父页面的<head>元素内。

脚本元素

只要加载文档，这些文件也会被加载：

然而，它只是jQuery和jQuery UI，你知道你将会使用它。您也可以将它们移动到父页面的<head>元素中。

2。将你想要加载的重要位放在体内。

这就是这些：

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>

将这些内容放在您尝试加载的文档的<body>元素内。然后，只要你followed that advice about scripts，就会成功加载。

（可选）在<body>中包含jQuery引用：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>

答案 2 :(得分：0)

我认为当您使用$(document).ready()加载文档时，$(function)又名load将无法执行。
您可以尝试在complete的{​​{1}}回调中手动触发它，或者您可以将传递给load的功能命名并调用它。

相关问题
最新问题