List.js addEventListener and .on() not working

Question

Trying to figure out a way to use addEventListener with List.js

• I have a page with some text and buttons
• I'm then loading List.js file which paginates these elements and allows for sorting.
• I'm adding an event listener to all those buttons when the main script file loads.

Order of JS loading:

1 - List.js
2 - List.js scripts file (with list js functions like creating the list etc)
3 - Main scripts file (with main JS code, including addEventListener code)

If I load the main scripts file first, then the event listener doesn't get created(i believe it gets refreshed when List.js loads and creates the different pagination pages.

With the files ordered the way I have above, the event listener only gets created and can be used for the first page of the list, if I switch to page 2,3,...they event listener doesn't get created for the button. I see that the elements for the other pages are actually dynamically created so that's why the addEventListener doesn't work.

My current solution has been to use onclick="myfunction(event)" on all the buttons, so that when Listjs generates the list items it has the function attached inline, but though this works fine I find it a bit hacky.

---

I see List.js has a method called .on() but I can't seem to get it to work either.

My code:

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

From what I can get from the docs, this should be fired every whenever lists are updated, which Seems to be what happens when I switch from page 1 to page 2 of the list (it replaces the HTML).

I also tried a different event which I assume should work when I use the search box but nothing happens:

menuList.on('searchStart', function(menuList){
  return console.log('list updated');
}); //doesn't log anything enither

How do I go about using this ListJs .on() method? I'd use it to create the event listener everytime a user switches the page and the list gets generated, something like this:

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

Answer 1

My code was totally correct...I was just including the wrong JS file...since I'd made a copy that had the new changes while the one being loaded didn't.

Answer 2

Looking at the API, You don't need to approach it from an .on, the onclick method is enough.

Here is a solution. Click on Run Snippet(in full page is better) and enjoy a working example!

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>

Hope this helps!