addClass 在动态加载的内容上

Question

I have a set of buttons that per default loads without the class I want them to have (from 3rd party site). The buttons change every time I click them - they're numbers (1 - 21) for scrolling a <table> but they're not all showing at the same time. Thus I've been trying to add the class they need after I've clicked them.

It worked fine at first, but as soon as I moved the actual datafile (PHP) to a separate file and made a button to fetch the data using ajax (data is only fetched once) the problems began.

Now the buttons work every 2nd - 3rd try.

HTML code:

    <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>

When these are loaded with the ajax function, they're given the class and style according to the following code:

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

..which works perfectly fine. But then when I try to add the same classes as the numbers adjust to show other numbers, it only works sometimes. I've been trying regular .click(function() {}) with poor results, and then searched this site and now using:

<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>

Which again, works about a third of the clicks.

In short: My HTML code keeps adjusting as I scroll through a set of numbers, but I fail to reapply classes and CSS using jQuery functions.

Can anyone please tell me where I'm going wrong and point me in the right direction?

Answer 1

It sounds like a race condition. You have a race between ajax completion that creates the buttons and the call to your code adding those classes/style to them.

Since there's nothing variable in what you've shown (it's always the same classes and style), I'd suggest modifying whatever code it is (client-side or server-side) that creates those buttons so that it includes all of the necessary classes (including one to set the style, rather than using inline styling).

If you can't do that for some reason, you'll need to modify the code to wait for the ajax to complete before adding the classes/styles to them. Ideally you do that by modifying the code doing the ajax so it calls your code that adds the classes/style once it's done.

If you an't do that , you can use a hack: jQuery provides an "ajax success" callback you can subscribe to via ajaxSuccess . Provided your code doing the ajax and creating the buttons doesn't do anything asynchronously before it creates them, that should let you update them once they've been created:

$(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");
});

Just beware that this happens after every ajax call. But the operations you're doing are harmless if repeated, so...

Answer 2

Why not create a request and capture the entire data at once and keep it in a variable? Because then you won't have the delay between the actual ajax response and adding classes to the created content?

Two things I would suggest:

1. TJ Crowder has provided another option to avoid the race effect that's currently happening and you can definitely do this and achieve exactly what you want.
2. Why not call the whole data on load? and then store in a object(hashTable or whatever) and access this data based on keys... where by you store keys as data attribute in your buttons so that you know what data to show and when.