jQuery点击事件无法获取AJAX修改后的data-id属性值求助

兄弟，你这问题跟AJAX缓存半毛钱关系都没有，是jQuery的.data()方法在搞鬼！

先给你掰明白：当你第一次调用button.data('id')的时候，jQuery会把这个值存到自己内部的缓存里，之后哪怕你用.attr('data-id', xxx)改了DOM上的属性，再调用.data('id')返回的还是缓存里的旧值——这就是为啥你先加载更多再筛选就出问题的原因：

• 先筛选再加载：此时还没点过加载按钮，button.data('id')没被调用过，缓存不存在，读取的是DOM上最新的id，请求自然正确。
• 先加载再筛选：第一次加载已经触发了button.data('id')，缓存了初始的id，之后筛选器只改了DOM属性，没更新jQuery的缓存，所以后续加载还是用旧id。

两种快速解决办法 #

办法1：改DOM属性的同时更新jQuery缓存 #

在筛选器的回调里，把更新属性的代码改成这样：

// 替换原来的 button.attr('data-id', termID);
button.attr('data-id', termID).data('id', termID);

这样既改了DOM上的属性，也同步更新了jQuery的缓存，之后用.data('id')就能拿到新值了。

办法2：直接读DOM属性，跳过缓存 #

如果你不想跟jQuery的缓存打交道，干脆每次都直接读取DOM上的属性值，把加载更多代码里的这行：

var termID = button.data('id');

改成：

var termID = button.attr('data-id');

这样每次都会从DOM上拿最新的data-id值，完全避开缓存问题。

另外提个小细节：你筛选器里拿postType的时候写的是button.attr('data-postType')，但按钮上的属性是data-posttype（全小写），虽然浏览器不区分属性大小写，但统一写法能避免潜在的坑，建议改成button.attr('data-posttype')。

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