gpt4 book ai didi

javascript - 将页面加载到 div 导致页面的 javascript 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:05 24 4
gpt4 key购买 nike

我正在通过以下方式将页面加载到 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 复制过来的)。

这是什么原因,我该如何解决?

最佳答案

您的脚本永远不会加载。它们在加载期间被剥离。

(The above is copy-pasta from http://jqueryui.com/datepicker/)

我假设您的意思是您正在复制该示例源的全部,大致如下所示:

<!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");

Load 不会在这里合作

根据docs on .load() :

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

根据我自己的经验,这通常意味着 .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>

关于javascript - 将页面加载到 div 导致页面的 javascript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16409192/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com