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

Question

試圖找出一種將 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 生成列表項時，它會內聯附加 function ，但雖然這很好用，但我覺得它有點 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

我如何 go 關於使用這個 ListJs .on()方法？ 每次用戶切換頁面並生成列表時，我都會使用它來創建事件偵聽器，如下所示：

menuList.on('updated', function(menuList){           
  const btns = document.querySelectorAll('.add-btns');
  btns.forEach(button => button.addEventListener('click', myfunction));
}); 

Answer 1

查看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>

希望這可以幫助！

Answer 2

好吧，這很愚蠢……但我的代碼完全正確……我只是包含了錯誤的 JS 文件……因為我制作了一份有新更改的副本，而正在加載的卻沒有。

掌心