javascript - 为 ajax 内容和未来的 dom 更改设置事件侦听器

Question

我试图弄清楚如何设置一个事件侦听器，该侦听器将在使用 fetch 加载 ajax 内容后工作。我正在尝试使用纯 javascript而不是 jQuery 来完成这一切。

我知道使用 jQuery 我可以做这样的事情，这将适用于由 ajax 加载的内容。

$('body').on('click', '#myLink', function () {
    // do stuff...
});

所以我的问题是，我怎样才能用普通的javascript做类似的事情？

在我的应用程序中，我有一个登录屏幕，显示没有设置会话或 cookie。用户登录后，javascript fetch 会加载一个主屏幕，并且该屏幕上有可点击的链接。到目前为止，我不得不为这些链接创建函数，事件侦听器在页面加载时以及在 fetch 命令之后触发。

这是我的应用程序中的一些代码，您可以看到我有一个在其他地方调用的 loadScreen 函数，然后在它工作后它调用 logoutFunction，这是因为在加载 ajax 内容之前不会显示注销链接. 但是，如果有人已经登录，则不会显示登录屏幕，而是会加载主页。因此，我在页面加载时触发了相同的注销功能。

function loadScreen(page){
    fetch(page)
    .then(function(res){return res.text()})
    .then(function(data){
        document.getElementById('mainWrap').innerHTML = data;
        logoutFunction();
    })  
}

function logoutFunction(){
    var logout = document.getElementById('logout');
    if(logout){
        logout.addEventListener('click',function(event){
            event.preventDefault();
            // do stuff..
        });
    }
}
logoutFunction();

总而言之，我试图摆脱 jQuery 并使用普通的 javascript 和 fetch 来做所有事情。这是我过去几天一直在研究的一个障碍。我已经看到有人提到突变观察者，但不确定这在我的情况下如何工作。我认为答案是某种方式与一个身体事件侦听器，然后触发这些其他事件侦听器。jQuery 是如何做到的？我真的很喜欢 jQuery 的优雅和简单，所以我希望有一个类似的方法来做到这一点。

标签： javascriptjqueryajaxdomevent-listener