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

Question

在我的项目中，我想将 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>  

intro-text.html

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

main.js

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

Answer 1

这是因为“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>