Question

我有一个正在加载到index.html中的heading.html文件。

heading.html

<header id="header">


 <div class="logo"></div>

 <nav>

  <a href="#home" class="slide-section">Home</a>
  <a href="#about-me" class="slide-section">About Me</a>
  <a href="#why-me" class="slide-section">Why Me?</a>
  <a href="#contact" class="slide-section">Contact</a>

</nav>

</header>

然后在我正在加载此文件的javascript文件中，它不允许我执行任何其他功能。

functions.js

$( document ).ready(function() {

  $(function(){
    $("#includedHeader").load("/assets/_includes/header.html");
  });

  $(function(){
    $("#includedFooter").load("/assets/_includes/footer.html");
  });

  $(function(){
    $("#includedWhyme").load("/assets/_includes/why-me.html");
  });

  $(".slide-section").click(function(){
    alert('clicked');


  });

});

正如你所看到的那样，我试图制作一个警告弹出窗口，只是为了测试它是否正常工作，但它没有。

有没有办法可以在这些正在加载的html文件上使用其他功能。

Answer 1

当你像$(".slide-section").click()那样绑定事件时，元素还没有。 .load()仍在抓取服务器中的内容。

但是，您可以在文档中使用on方法（委派事件）。它会执行 live 事件附件（即使该元素仅在将来存在，也会捕获该事件）。

来自.on() docs：

委派活动的优势在于他们可以处理来自的活动稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序的需要。这个 element可以是a中视图的容器元素例如，模型 - 视图 - 控制器设计，或者如果事件是文档 handler希望监视文档中的所有冒泡事件。

另一个建议（如果可能）是从$(function(){}来电中删除load。 $(handler)是$(document).ready(handler)的简写。所以，好像你曾经打过一次电话，你再也不需要它了。

所以，我的建议是这样的：

$( document ).ready(function() {

    $("#includedHeader").load("/assets/_includes/header.html");
    $("#includedFooter").load("/assets/_includes/footer.html");
    $("#includedWhyme").load("/assets/_includes/why-me.html");

});

$(document).on("click", ".slide-section", function(){
    alert('clicked');
});

Answer 2

不要直接使用click（）方法..如果内容不在文档中，它将无法工作。而不是使用.on（）方法来指定click方法，其委托具有以下优势：他们可以处理来自稍后添加到文档的后代元素的事件。所以我从我的观点来看使用以下 -

$(document).on("click", ".slide-section", function(){
    alert('clicked');
});

如何在已加载到另一个html文档的html文档上使用jquery？

2 个答案: