使用 jQuery 导入 HTML 文件答案

【问题标题】：Import HTML file using jQuery使用 jQuery 导入 HTML 文件
【发布时间】：2016-03-30 14:47:19
【问题描述】：

我正在尝试使用 jQuery 导入 HTML 文件：

$('#section1').load('section1.html');

问题是当代码加载时 jQuery 不能正常工作。在这个 HTML 中，我有一些 jQuery UI 和一些复选框，如果我不使用“加载”功能工作，但如果我导入它，它们就无法识别。

【问题讨论】：

哪里可以看出问题？ jsfiddle?
@Daniele Martini，您需要为每个 html 文件创建一个 document.ready 块，并注意代码/事件仅适用于您的 html。我不知道我是否解释过自己
可以给我一个 document.ready 块的例子吗？如果我尝试导入第 1 部分，我必须在其中插入此脚本（下方/顶部），语法是什么？
您只需要一个脚本选项卡进入每个 html 文件 $(document).ready(function() {...});并将被执行。你有什么问题？
抱歉，您能说得更准确一点吗？这是我第一次这样做，而且我对 Jquery 也不是很熟悉。我创建了一个新文件并在其上复制了我的 HTML 代码，以便在主页中导入。在主页的底部，我使用了这个脚本 $('#section1').load('section1.html');在我的页面中间，我创建了一个带有 section1 ID 的 div。我必须在哪里使用你的脚本 $(document).ready(function(){...});？你能给我举个例子来更好地理解吗？

标签： jquery html import

【解决方案1】：

确保文件路径正确。如果使用相对路径，请确保文件位于正确的位置。

我的工作示例：

test.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    </head>
    <body>
        <h1>
            Test Header
        </h1>
        <div id="place_holder"></div>
    </body>
    <script>
        $(document).ready(function() {
          $('#place_holder').load("load_me.html");
        });
    </script>
</html>

load_me.html：放置在与 test.html 相同的位置

<h2>Loaded from another file</h2>

您不必执行内嵌 Javascript。您可以加载执行相同操作的 external JavaScript 文件。

【讨论】：

也许我没有说清楚我的问题。我实际上是在我的 HTML 中导入外部文件，但外部代码不适用于 jquery。我正在导入一个表单（标签、输入、部分、按钮 ecc ecc），并且我正在使用 jquery UI 和一个滚动到库，当我导入代码时它们不起作用，
确保你用 '$(document).ready(function() { });' 包裹你的 JS 文件另外，请确保您正在加载 jquery 库。您可以通过在 Firefox 中按 F12 并查看 Concole 选项卡来检查 JavaScript 错误。此外，它应该通过查看网络选项卡并重新加载页面来告诉您您的网页是在 jQuery 库中加载还是出现 404 未找到错误。
我已经尝试了一切。导入的代码在主页面导入的库中无法识别
您能否提供更多关于您如何加载 JS 文件以及 JS 文件内容和相关 HTML 的代码 sn-ps？

【解决方案2】：

最后我想出了如何解决这个问题。我尝试使用 PHP 而不是 Jquery 加载函数来包含其他 HTML 文件。

我用 PHP 扩展名重命名了我的文件，并将其上传到了 MAMP 或 XAMP 等虚拟服务器上。

然后使用这个 sintax 导入我的代码。

<?php  include("your_file_path/your_file_name.html");  ?>

我在主页中包含了网站的很大一部分，而我的其他 HTML 文件位于主页的同一文件夹中。我用过

<?php  include("section6.html");  ?>

使用此方法后，我的所有 Jquery 库都正常工作。

【讨论】：