jQuery Метод * .load () загружает контент более одного раза для каждого элемента

Question

У меня есть страница, на которой я показываю несколько ОДИНАКОВЫХ div. Когда я нажимаю на отдельную ссылку, я хочу загрузить в те же самые div содержимое, которое я получил с сервера через Ajax. Проблема возникает, когда он загружает в этот один контент столько раз, сколько есть div. Итак, если у меня есть 3 точно таких же div, и я нажимаю, чтобы выполнить метод .load (), он загрузит 3 раза новый контент в каждый div. Я хочу, чтобы каждый элемент загружался только один раз.

HTML перед выполнением метода .load () (у меня 3 таких div на одной странице):

<div data-id-like="747" type="submit" class="submit-like">
  <div class="load-here-747">
    <div class="load-ajax-747">1</div>
  </div>
</div>

После метода .load () каждый из 3 div будет выглядеть так:

<div data-id-like="747" type="submit" class="submit-like">
  <div class="load-here-747">
    <div class="load-ajax-747">2</div>
    <div class="load-ajax-747">2</div>
    <div class="load-ajax-747">2</div>
  </div>
</div>

Ajax:

$(document).ready(function () {
    $(document).on('click', 'div.submit-like', function () {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let submit_like = $(this).data('id-like');
        let token = $('meta[name="csrf-token"]').attr('content');
        let all = $(`[data-id-like=${submit_like}]`); 
        let url = window.location.pathname;

        $.ajax({
            url: `/tweets/${submit_like}/like`,
            type: 'POST',
            data: {
                'id': submit_like,
                '__token': token
            }
        }).done(function () {

            $(".load-here-" + submit_like).load(`${url}  .load-ajax-${submit_like}`);
            });            
         });            
      });
  });

Answer 1

Я много чего пробовал, но это работает лучше всего. На мой взгляд, это длинновато. Он получает длину дочерних узлов, а затем выполняет для l oop, чтобы удалить все, кроме одного.

$(".load-here-" + submit_like).load(`${url}  .load-ajax-${submit_like}`, function() {
  let el = $(this).children().length;
  for (i = 0; i < el; i++) {
    $(`.load-ajax-${submit_like}:nth-child(${i})`).remove();
  }
});

Но я все же думаю, что есть более эффективные способы сделать это.

Answer 2

Что касается этого раздела здесь, вы должны очистить содержимое элементов, прежде чем загружать в них больше:

....
.done(function () {
    $(".load-here-" + submit_like).html(" ");
    // Remove the content first
    $(".load-here-" + submit_like).load(`${url}  .load-ajax-${submit_like}`);
 });
....

---

Затем вы можете попробовать Регистрировать запросы и посмотреть, что именно было получено:

$(".load-here-" + submit_like).load(`${url}  .load-ajax-${submit_like}`, 
function( response, status, xhr ) {
    var obj = $.parseJSON(response);
    console.log(obj.ok);
});

Функция load принимает вторую функцию обратного вызова