0

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

Salih K
  • 701
  • 2
  • 12
  • 31
  • 1
    Don't mix and match `.attr` with `.data` - .data will read the attribute just *once*, then *cache* the value. Updating via `.attr` will not update the value retrieved via subsequent `.data`. Change `$('.load-more').attr('data-filter-id', catId);` to `$('.load-more').data('filter-id', catId); ` – freedomn-m Oct 20 '21 at 17:02
  • 1
    Does this answer your question? [jQuery Data vs Attr?](https://stackoverflow.com/questions/7261619/jquery-data-vs-attr) – freedomn-m Oct 20 '21 at 17:02
  • 1
    Thank you, that was a useful link. When I change it works. – Salih K Oct 20 '21 at 17:17

1 Answers1

0

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>
Phaelax z
  • 1,814
  • 1
  • 7
  • 19