时间戳

首页 > 解决方案 > AJAX 调用后读取数据属性

ajax - AJAX 调用后读取数据属性

问题描述

通过 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 元素？

标签： ajaxattributes

解决方案

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

在ajax调用上面添加这个

const self = $(this);

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

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

至

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

现在可以使用了。

JSFIDDLE

推荐阅读