addClass для динамически загружаемого контента

Question

У меня есть набор кнопок, которые по умолчанию загружаются без класса, который я им хочу (со стороннего сайта). Кнопки меняются каждый раз, когда я нажимаю на них - это цифры (1 - 21) для прокрутки <table>, но не все они отображаются одновременно. Таким образом, я пытался добавить нужный им класс после того, как щелкнул по ним.

Сначала он работал нормально, но как только я переместил фактический файл данных (PHP) в отдельный файл и сделал кнопку для извлечения данных с помощью ajax (данные выбираются только один раз) начались проблемы.

Теперь кнопки работают каждую 2-ю - 3-ю попытку.

HTML код:

    <div class="dataTables_paginate paging_simple_numbers" id="minTabell_paginate">

    <a class="paginate_button previous btn btn-info float-left" aria-controls="minTabell" data-dt-idx="0" tabindex="0" id="minTabell_previous" style="margin-right: 3px;">Previous</a>

    <span>
        <a class="paginate_button current" aria-controls="minTabell" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="minTabell" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="minTabell" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="minTabell" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="minTabell" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="minTabell" data-dt-idx="6" tabindex="0">21</a>
        <!-- Goes up to 21 -->
    </span>

    <a class="paginate_button next" aria-controls="minTabell" data-dt-idx="7" tabindex="0" id="minTabell_next">Next</a>

    </div>

Когда они загружены функцией ajax, им присваивается класс и стиль в соответствии со следующим кодом:

$('.paginate_button').addClass('btn btn-info');
$('.paginate_button').addClass('float-left');
$(".paginate_button").css("margin-right","3px");

.., который прекрасно работает. Но затем, когда я пытаюсь добавить те же классы, что и числа, корректируемые для отображения других чисел, это работает только иногда. Я регулярно пробовал .click(function() {}) с плохими результатами, а затем искал этот сайт и теперь использую:

<script>
$('body').on('click', 'div.dataTables_paginate', function(event) {
    $('.paginate_button').addClass('btn btn-info');
    $('.paginate_button').addClass('float-left');
    $(".paginate_button").css("margin-right","3px");
    console.log("Click received");
    $('td').each(function(i){
        $(this).html($(this).html().replace('_',' '));          
    });
});
</script>

Что, опять же, работает около трети кликов.

Вкратце: мой код HTML продолжает корректироваться при прокрутке набора чисел, но мне не удается повторно применить классы и CSS с использованием функций jQuery.

Может кто-нибудь сказать мне, где я иду не так и указать мне в правильном направлении?

Answer 1

Звучит как состояние гонки. У вас есть гонка между завершением ajax, которое создает кнопки и вызов вашего кода, добавляющего к ним эти классы / стиль.

Поскольку в ваших показах нет ничего переменного (это всегда одни и те же классы и стиль), я бы предложил изменить любой код (на стороне клиента или на стороне сервера), который создает эти кнопки, чтобы он включал в себя все необходимые классы (в том числе один для установки стиля, вместо использования встроенного стиля).

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

Если вы не делаете , что , вы можете используйте хак: jQuery предоставляет обратный вызов "ajax success", на который вы можете подписаться через ajaxSuccess. Если ваш код, выполняющий ajax и создающий кнопки, ничего не делает асинхронно до того, как он их создаст, это должно позволить вам обновить их после их создания:

$(document).ajaxSuccess(function() {
    // No reason to search the DOM three times for the same elements, just chain
    $('.paginate_button')
        .addClass('btn btn-info float-left')
        .css("margin-right","3px");
});

Просто остерегайтесь, что это происходит после каждый ajax звонок. Но операции, которые вы делаете, безвредны при повторении, так что ...

Answer 2

Почему бы не создать запрос, собрать все данные сразу и сохранить их в переменной? Потому что тогда у вас не будет задержки между фактическим ajax ответом и добавлением классов в созданный контент?

Две вещи, которые я бы предложил:

1. TJ Crowder предоставил еще одну возможность избежать эффекта гонки, который происходит в данный момент, и вы определенно можете сделать это и достичь именно того, что хотите.
2. Почему бы не вызвать целые данные о загрузке? а затем сохранить в объекте (hashTable или что-то еще) и получить доступ к этим данным на основе ключей ... где вы храните ключи в качестве атрибута данных в своих кнопках, чтобы вы знали, какие данные отображать и когда.