【发布时间】：2020-09-21 17:45:55
【问题描述】：
试图找出一种将 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
根据我从the 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));
});
【问题讨论】：
标签： javascript listjs