2

我正在将页面加载到 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的copy-pasta）。

是什么原因，我该如何解决？

4

3 回答 3

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已经触发的事件。

于 2013-05-07T00:34:05.873 回答
2

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

（以上是来自http://jqueryui.com/datepicker/的copy-pasta ）

我将假设您的意思是您正在复制该样本的全部源代码，大致如下所示：

<!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 的加载函数获取此文档并将其放置在 div 中：

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

此处加载不合作

根据.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>您要加载的文档的元素中。然后，如果您遵循有关脚本的建议，它将成功加载。

可选地，在 : 中包含 jQuery 引用<body>：

<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>
于 2013-05-07T01:20:53.843 回答
0

我认为$(document).ready()当$(function)您使用load.
您可以尝试在 的complete回调中手动触发它load，也可以将传递给的函数命名$并调用它。

于 2013-05-07T00:25:00.287 回答