javascript - JS 未在加载了 .load 的页面上执行

Question

我正在开发单页应用程序网站。所有导航都发生在一个 div 中。我使用 addEventListener 点击查找链接，阻止常规 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 中打开的页面。有没有一种方法可以应用相同的脚本，而无需再次调用它(这会造成很多麻烦)？

Answer 1

使用委托(delegate)的事件处理程序:

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

您可以在未被删除的 DOM 节点上注册处理程序(在您的例子中，容器的内容发生变化，但元素本身保持不变)，并将选择器作为第二个参数传递以检查是否单击发生在其中与选择器匹配的元素上。

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