试图找出一种将 addEventListener 与List.js一起使用的方法
- 我有一个带有一些文本和按钮的页面
- 然后我加载List.js文件，该文件对这些元素进行分页并允许排序。
- 当主脚本文件加载时，我正在向所有这些按钮添加一个事件侦听器。
JS加载顺序：
1 - List.js
2 - List.js 脚本文件（带有列表 js 函数，例如创建列表等）
3 - 主脚本文件（带有主要 JS 代码，包括 addEventListener 代码）
如果我首先加载主脚本文件，则不会创建事件侦听器（我相信它会在 List.js 加载并创建不同的分页页面时刷新。
使用按照我上面的方式排序的文件，事件侦听器只会被创建并且可以用于列表的第一页，如果我切换到第 2,3 页，...它们不会为按钮。我看到其他页面的元素实际上是动态创建的，所以这就是 addEventListener 不起作用的原因。
我目前的解决方案是onclick="myfunction(event)"在所有按钮上使用，因此当 Listjs 生成列表项时，它具有内联附加的功能，但虽然这工作正常，但我觉得它有点 hacky。
我看到 List.js 有一个名为的方法，.on()但我似乎也无法让它工作。
我的代码：
var menuList = new List('menu-items', {
valueNames: ['menu-item'],
page: 3,
pagination: true
});
function log_console(){
return console.log('list updated!');
} //tried this, doesn't work
//menuList.on('updated', log_console);
menuList.on('updated', function(menuList){
return console.log('list updated');
}); //this doesn't work either
从我可以从docs获得的信息来看，每次更新列表时都应该触发它，这似乎是当我从列表的第 1 页切换到第 2 页时发生的情况（它替换了 HTML）。
我还尝试了一个不同的事件，我认为当我使用搜索框时应该可以工作，但没有任何反应：
menuList.on('searchStart', function(menuList){
return console.log('list updated');
}); //doesn't log anything enither
我该如何使用这个 ListJs.on()方法？每次用户切换页面并生成列表时，我都会使用它来创建事件侦听器，如下所示：
menuList.on('updated', function(menuList){
const btns = document.querySelectorAll('.add-btns');
btns.forEach(button => button.addEventListener('click', myfunction));
});