AJAX 调用后读取数据属性

Question

我在通过 AJAX 调用更新后读取数据属性值时遇到一些问题。

这是调用，它可以正常工作并成功更新数据分页值。

$('.block-resource-feed').on('click','#get-more-posts div',function(){

  // Get current paged value
  var paged = $(this).data('paged');

  $.ajax({
    type: 'POST',
    url: jsVar.ajax_url,
    dataType: "html",
    data: {
      action : 'get_more_posts',
      paged : paged
    },
    success: function( response ) { 

      // Return data
      $('#post-feed').append(response);

      // Updated paged value
      $('#get-more-posts div').attr('data-paged',paged + 1);

    }
  });

})

按钮的 HTML 一侧；

<div id="get-more-posts">

  <div data-count="13" data-paged="2">More resources</div>

</div>

再次单击 div 时出现问题，尽管在 DOM 中发生了变化，但值始终保持在 2。

我认为使用上面的点击方法应该允许在调用后读取 DOM 个元素？

Answer 1

您应该 set/update 在 this 元素的实例上设置此值。

在上面添加这个 ajax call

const self = $(this);

并在成功回调中更改您的代码

$('#get-more-posts div').attr('data-paged',paged + 1);

至

self.data('paged',paged+1);

现在可以使用了。

JSFIDDLE

AJAX 调用后读取数据属性

Reading data attribute after AJAX call

ajax

attributes