jQuery修改data属性后读取不到最新值？筛选联动加载更多功能异常解决

问题原因 #

jQuery 的 .data() 方法在首次读取元素的 data-* 属性后，会把值存在内部缓存里，后续不会再同步读取DOM上的属性值。你修改属性时用的 .attr() 只会更新DOM属性，不会同步更新jQuery的缓存，所以每次用 .data() 读取拿到的都是第一次缓存的旧值。

解决方法 #

有两种修改方案，任选其一即可：

方案1：设置属性时统一用 .data() 方法 #

把筛选点击事件里设置属性的代码从 .attr() 改成 .data()，直接更新jQuery缓存里的值，读取时就能拿到最新值：

$(function() {
  var el = $('.filter-cats').find('a');
  el.on('click', function (e) {    
        e.preventDefault();
        var catId = $(this).data('filter');
        // 用data方法更新缓存值
        $('.load-more').data('filter-id', catId);  
    });
  
   $('.load-more').on('click',  function () {
        var ct_filtr = $(this).data('filter-id');
        console.log(ct_filtr);
    })
})

方案2：读取属性时统一用 .attr() 方法 #

把加载更多按钮点击事件里读取值的代码从 .data() 改成 .attr()，直接读取DOM上的最新属性值，不走jQuery缓存：

$(function() {
  var el = $('.filter-cats').find('a');
  el.on('click', function (e) {    
        e.preventDefault();
        var catId = $(this).data('filter');
        $('.load-more').attr('data-filter-id', catId);  
    });
  
   $('.load-more').on('click',  function () {
        // 直接读取DOM属性获取最新值
        var ct_filtr = $(this).attr('data-filter-id');
        console.log(ct_filtr);
    })
})

内容的提问来源于stack exchange，提问作者Salih K