Question

I’ve the following piece of code which works on one page and doesn’t work on another though html markup is the same on both pages:

JS

$("#books_list").on('click', '.load-more-books', function(event) {
  // Some stuffs
});

Html

<div id="book_list">
...
</div>
<a href="..." class="load-more-books">More books</a>

Even after entering JS code in Chrome Browser console events not bound.

Can anyone help me with this, what am I doing wrong?

Thanks,
Sultan

Answer 1

The selector you specified means that .load-more-books needs to be a descendant of #book_list for this to work.