List.js addEventListener和.on()不工作

Question

试图找出一种将addEventListener与List.js结合使用的方法

• 我有一页有文字和按钮的页面
• 然后，我将加载List.js文件，该文件对这些元素进行分页并允许排序。
• 当主脚本文件加载时，我将向所有这些按钮添加一个事件侦听器。

JS装载顺序：

1- List.js

2- List.js脚本文件(具有列表js函数，如创建列表等)

3-主脚本文件(包含主JS代码，包括addEventListener代码)

如果我先加载主脚本文件，那么事件侦听器就不会被创建(我相信当List.js加载和创建不同的分页页面时它会被刷新。

按照上述方式排序的文件，事件侦听器只能被创建，并且可以用于列表的第一页，如果切换到第2,3页，则不会为按钮创建...they事件侦听器。我看到其他页面的元素实际上是动态创建的，所以这就是为什么addEventListener不能工作。

我目前的解决方案是在所有按钮上使用onclick="myfunction(event)"，这样，当Listjs生成列表项时，它就具有内联附加的函数，但虽然工作良好，但我觉得它有点麻烦。

我看到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

根据我可以从医生们获得的信息，每当列表被更新时，都应该触发它，这似乎就是当我从第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));
}); 

Answer 1

这是dumb...but，我的代码是完全正确的.我只是包含了错误的JS file...since，我做了一个拷贝，其中包含了新的更改，而加载的那个没有。

面膜

Answer 2

看一下API接口，您不需要从.on中接近它，onclick方法就足够了。

这里有一个解决办法。点击运行片段(在完整的页面更好)，并享受一个工作的例子！

​

const options = {
  pagination: true,
  page: 1,
  plugins: [
     ListPagination({})
 ],
  valueNames: [ 'name', 'city' ],
  item: '<li><h3 class="name"></h3><p class="city"></p><button onclick="handleClick(this)">Log and Delete</button></li>'
};
const values = [
  { name: 'Lucas', city:'Stockholm' }
  ,{ name: 'Jonas', city:'Berlin' }
];
const hackerList = new List('hacker-list', options, values);

function handleClick(node) {
  const list = node.parentNode;
  console.log(list);
  console.log(hackerList);
  //Delete example
  const name = list.querySelector(".name").innerHTML
  console.log(name);
  hackerList.remove("name", name);
}

hackerList.on('updated', console.log);
hackerList.add({ name: "Jonny", city: "Stockholm" });

h2 {
  font-family:sans-serif;
}
.list {
  font-family:sans-serif;
  margin:0;
  padding:20px 0 0;
}
.list > li {
  display:block;
  background-color: #eee;
  padding:10px;
  box-shadow: inset 0 1px 0 #fff;
}
.avatar {
  max-width: 150px;
}
img {
  max-width: 100%;
}
h3 {
  font-size: 16px;
  margin:0 0 0.3rem;
  font-weight: normal;
  font-weight:bold;
}
p {
  margin:0;
}

input {
  border:solid 1px #ccc;
  border-radius: 5px;
  padding:7px 14px;
  margin-bottom:10px
}
input:focus {
  outline:none;
  border-color:#aaa;
}
.sort {
  padding:8px 30px;
  border-radius: 6px;
  border:none;
  display:inline-block;
  color:#fff;
  text-decoration: none;
  background-color: #28a8e0;
  height:30px;
}
.sort:hover {
  text-decoration: none;
  background-color:#1b8aba;
}
.sort:focus {
  outline:none;
}
.sort:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}
.sort.asc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  content:"";
  position: relative;
  top:13px;
  right:-5px;
}
.sort.desc:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
  content:"";
  position: relative;
  top:-10px;
  right:-5px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
<div id="hacker-list">
<input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort by name
  </button>
  <ul class="list">
  </ul>
  <ul class="pagination"></ul>
</div>

​

希望这能有所帮助！