Чтение атрибута данных после 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, и значение всегда остается на 2, несмотря на изменение в DOM.

Я думал, что использование вышеуказанного метода щелчка должно позволить чтение элементов DOM после вызова?

Answer 1

Вы должны установить / обновить эти значения в экземпляре вашего элемента this.

Добавьте это выше ajax вызовите

const self = $(this);

и измените свой код при успешном обратном вызове

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

на

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

Это будет работайте сейчас.

JSFIDDLE