如何在 sub-html 页面中调用 Jquery 代码？答案

【问题标题】：How do you call Jquery code in sub-html pages?如何在 sub-html 页面中调用 Jquery 代码？
【发布时间】：2021-07-13 17:45:47
【问题描述】：

我正在使用 jQuery 创建一个网站。

我正在尝试使用主框架页面（index.html）获取干净的代码，并调用 jQuery 来加载其他组件。所以将来如果我可以用同样的方式调用我的组件。

<head>
  <title>my site</title>
</head>

<body>
  <div id="sidebar">
    <script>
      $(function() {
        $("#sidebar").load("components/sidebar.html");

      });
    </script>
  </div>

  <!-- Main Content -->
  <div id="content">
  </div>
</body>

</html>

而我的 sidebar.html 是

<!-- Sidebar -->
<ul>
  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>
</ul>
<!-- End of Sidebar -->

它现在可以工作，但我只想显示一个使用用户数据的元素，例如这个 component.html 不工作

<!-- Sidebar -->
<ul>

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        $(this).html(
          '<li><a>element 3</a></li>')
      });
  </script>

</ul>
<!-- End of Sidebar -->

可能是因为 load("components/sidebar.html") 没有触发我在 sidebar.html 文件中的脚本？

有没有更好的方法？

非常感谢。

【问题讨论】：

标签： jquery

【解决方案1】：

有多个问题：

if 语句未正确关闭。结尾的} 不见了。
$(this) 引用的是整个文档（index.html 和嵌入的 sidebar.html），而不是 the current position of the script。

您可以改用这个 sidebar.html：

<!-- Sidebar -->
<ul>

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        let script = this.scripts[this.scripts.length - 1];
        $('<li><a href="index.html">element 3</a></li>').insertBefore(script);
      });
    }
  </script>
</ul>
<!-- End of Sidebar -->

另一种解决方案，将新列表项添加到特定列表（需要列表元素上的某些内容来识别）：

<!-- Sidebar -->
<ul id="sidebar">

  <!-- Nav Item - Dashboard -->
  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 1 </a>
  </li>

  <li class="nav-item active">
    <a class="nav-link" href="index.html"> element 2 </a>
  </li>

  <script>
    var access = 0;
    if (access == 0) {
      $(function() {
        $('ul#sidebar').append('<li><a href=\"index.html\">element 3</a></li>');
      });
    }
  </script>
</ul>
<!-- End of Sidebar -->

.load 不会触发我在 sidebar.html 文件中的脚本？

在您的示例中，执行 sidebar.html 上的脚本。但要小心，脚本不是使用选择器表达式执行的（例如sidebar.html #example）。这种行为也是described in the jQuery documentation：

当使用不带后缀选择器表达式的 URL 调用 .load() 时，内容会在脚本被删除之前传递给 .html()。这会在脚本块被丢弃之前执行它们。但是，如果在调用 .load() 时将选择器表达式附加到 URL，则脚本会在 DOM 更新之前被剥离，因此不会执行。

【讨论】：

【解决方案2】：

你必须使用 $('ul') 而不是 $(this) 并且它不是 .html() 但它应该是 .append() 如果你想添加新的 li 或者 .html () 很好。

var access = 0;
if (access == 0) {
  $(function() {
    $('ul').append(
      '<li><a>element 3</a></li>')
  }); }

【讨论】：