如何正确处理jquery事件绑定?

Question

我有一个过滤器和加载更多的清单页面，单独过滤和加载更多的工作，但我实际上想要的是不工作，我认为这将是清楚的，如果我向你展示的代码来解释我的情况，这里是迄今为止我所尝试的。

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>

jQuery部分是这样的

$(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);
})
})

我面临的问题是，当我点击任何过滤器，比如" cat "，它设置&;data-filter-id"成功地在按钮上使用load-more类，我可以看到检查元素时的变化。但是在那之后，当我点击Load More按钮时，它并没有给我改变的' data-filter-id ';值，只给我第一个单击的过滤器id。我知道这与数据绑定有关，我不是开发人员，所以我如何才能正确地完成这项工作，任何见解将非常感谢。

总之，当我单击任何过滤器类别时，应该设置Load More按钮data-filter-id，当我单击Load More按钮时，我需要获得该值以传递给另一个函数。

这是codependency链接:https://codepen.io/salih24by7/pen/LYjRxXL

Answer 1

您可以使用事件委托并将单个侦听器附加到过滤器选项的父容器上，而不是每个单独的链接:

$('.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>