I have a filter and load more listing page, individually filter and load more working, but what I actually want that is not working, I think it will be clear if I show you the code to explain my situation, here is so far what I have tried.
HTML:
<div class="block-wrap">
<ul class="filter-cats">
<li><a href="#" data-filter="all">All</a></li>
<li><a href="#" data-filter="cat">Cats</a></li>
<li><a href="#" data-filter="dog">Dogs</a></li>
</ul>
<div class="animal-listing" id="list">
<div>Cat 1</div>
<div>Cat 2</div>
<div>dog 1</div>
<div>Cat 3</div>
<div>dog 2</div>
</div>
<button class="load-more" data-filter-id="all">Load More</button>
</div>
And the jQuery part is this:
$(function() {
var el = $('.filter-cats').find('a');
el.on('click', function (e) {
e.preventDefault();
var currentFilter = $(this),
catId = $(currentFilter).data('filter');
$('.load-more').attr('data-filter-id', catId);
});
$('.load-more').on('click', function () {
var ct_filtr = $(this).data('filter-id');
console.log(ct_filtr);
})
})
Issue I am facing is, when I click any filter, let's say "Cats", it sets "data-filter-id" successfully on the button with load-more class, I can see that changes when inspecting the element. But after that when I click on the Load More button, it is not giving me the changed "data-filter-id" value, giving me the first clicked filter id only. I know this is something to do with data binding, I am not a developer, so how can I get this work correctly, any insights will be greatly appreciated.
In summary, when I click on any filter category, that should set the Load More button data-filter-id and when I am clicking on the load more button I need to get that value to pass to another function.
Here is the codepen link: https://codepen.io/salih24by7/pen/LYjRxXL
You can use event delegation and attach a single listener to the parent container of your filter options rather than to each separate link:
$('.filter-cats').on('click', 'a', e => {
e.preventDefault();
var d = $(e.target).attr('data-filter');
$('.load-more').attr('data-filter-id', d);
});
$('.load-more').on('click', e => {
console.log($(e.target).attr('data-filter-id'));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="filter-cats">
<li><a href="#" data-filter="all">All</a></li>
<li><a href="#" data-filter="cat">Cats</a></li>
<li><a href="#" data-filter="dog">Dogs</a></li>
</ul>
<div class="animal-listing" id="list">
<div>Cat 1</div>
<div>Cat 2</div>
<div>dog 1</div>
<div>Cat 3</div>
<div>dog 2</div>
</div>
<button class="load-more" data-filter-id="all">Load More</button>