JS 没有在加载了 .load 的页面上执行答案

【问题标题】：JS not executing on page loaded with .loadJS 没有在加载了 .load 的页面上执行
【发布时间】：2018-12-10 00:19:09
【问题描述】：

我正在开发一个单页应用程序网站。所有的导航都发生在一个 div 中。我使用 addEventListener click 来查找链接，防止常规 href 并在 div 中打开它。

使用此代码，我可以更改页面，保留页眉和页脚而不刷新整个页面。

var spa_array = Array.from(document.getElementsByClassName('spa')); // Array with history (for the back button)

spa_array.forEach( function(b) {
    var id = b.id;
    b.addEventListener('click', function(e) {
        event.preventDefault(); // Prevent href
        history.pushState({id:id}, null, id); // Change url on browser
        openPage(id);
    });
});

window.addEventListener('popstate', function(e) {
    openPage(e.state.id);
});

function openPage(url) {
    var encodedUrl = encodeURI(url);
    $("#spa").load(encodedUrl); // open link inside the div
}

这就是问题发生的地方：我使用 JS 在 div 上加载一个新页面，例如 index_2.html。 index_2.html页面上的链接不会触发JS addEventListener，所以会刷新页面并打开新的链接。

JS 未应用于在 .load 中打开的页面。有没有办法应用相同的脚本，而无需再次调用它（这会导致很多麻烦）？

【问题讨论】：

您不需要在每次重新加载内容时重新附加事件侦听器。只需听宿主元素 (#spa) 的“点击”事件。由于“冒泡”，您将在其中获得所有子元素的“点击”事件。

标签： javascript jquery single-page-application

【解决方案1】：

使用委托事件处理程序：

$("#spa").on('click', '.spa', function(e){
    var anchor = this,
        id = anchor.id;
    e.preventDefault();
    history.pushState({id:id}, null, id);
    openPage(id);
});

您可以在未删除的 DOM 节点上注册处理程序（在您的情况下，容器的内容发生变化，但元素本身保持不变），并传入选择器作为第二个参数以检查是否点击发生在其中匹配选择器的元素上。

这是必要的，因为一旦您.load() 附加内容，它将替换之前元素中的任何内容，包括您在首次加载时附加的任何事件侦听器。每次更改内容时都需要调用循环，但这是一种资源密集型解决方案，可以省去麻烦。

【讨论】：

【解决方案2】：

我将提取添加事件侦听器的逻辑，如下所示：

function bindLinks() {
  var spa_array = Array.from(document.getElementsByClassName('spa'));
  spa_array.forEach( function(b) {
    var id = b.id;
    b.addEventListener('click', function(e) {
      event.preventDefault(); // Prevent href
      history.pushState({id:id}, null, id); // Change url on browser
      openPage(id);
    });
  });
}

这样你就可以在 html 加载到你的 div 之后调用bindLinks()。您可以通过将其作为第二个参数传递给 .load() 来做到这一点。

function openPage(url) {
  var encodedUrl = encodeURI(url);
  $("#spa").load(encodedUrl, bindLinks);
}

【讨论】：