时间戳

首页 > 解决方案 > 包含的 jQuery 不适用于包含的 html

jquery - 包含的 jQuery 不适用于包含的 html

问题描述

在我的项目中，我想将 include 用于通用 HTML 部分。但是当我包含一个 HTML 文件时，jQuery 不再工作了。下面是我的代码示例。在这种情况下，我想在此页面中包含介绍文本。警报会起作用，但带有类介绍文本的跨度也将可见，而 main.js 中的代码应使其隐藏。有人有什么想法吗？

HTML页面

<div id="include-introText"></div>

<script src="main.js"></script>

<script type="text/javascript">

  $('#include-introText').load('intro-text.html', function () {
     // nothing
  });

</script>

介绍文本.html

<span class="intro-text">Hello, this is an intro text</span>

main.js

$('span.intro-text').hide();
alert('test')

标签： jqueryhtmlinclude

解决方案

这是因为 "main.js" 在 "intro-text.html" 之前加载，这意味着 main.js 正在寻找

$('span.intro-text')

这不会返回任何内容，这意味着您没有隐藏任何内容，然后在加载 intro-text.html 时它只会显示该跨度。为了防止这种情况，您必须在加载 intro-text.html 后加载 main.js。

<div id="include-introText"></div>

<script type="text/javascript">

  $('#include-introText').load('intro-text.html', function () {
     var script = document.createElement('script');
     script.onload = function () {
        //do stuff with the script
     };
     script.src = "main.js";

    document.head.appendChild(script);
  });

</script>

推荐阅读