javascript - addClass 动态加载的内容

Question

我有一组按钮，默认加载时没有我希望它们具有的类(来自第 3 方站点)。每次我单击按钮时，按钮都会发生变化 - 它们是用于滚动 <table> 的数字 (1 - 21)但它们并非全部同时显示。因此，在单击它们后，我一直在尝试添加它们所需的类。

一开始工作得很好，但是当我将实际的数据文件(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 代码不断调整，但我无法使用 jQuery 函数重新应用类和 CSS。

谁能告诉我哪里出了问题并指出正确的方向？

Answer 1

为什么不创建一个请求并立即捕获整个数据并将其保存在变量中？因为这样你就不会在实际的 ajax 响应和向创建的内容添加类之间有延迟了？

我建议两件事:

1. T.J Crowder 提供了另一种选择来避免当前正在发生的竞争效应，您绝对可以做到这一点并完全实现您想要的目标。
2. 为什么不在加载时调用整个数据？然后存储在一个对象(哈希表或其他)中并根据键访问这些数据...您可以将键作为数据属性存储在按钮中，以便您知道要显示哪些数据以及何时显示。