addClass 在动态加载的内容上

Question

我有一组默认加载的按钮，没有我希望它们拥有的 class（来自第 3 方网站）。 每次单击按钮时，按钮都会更改 - 它们是用于滚动<table>的数字 (1 - 21)，但它们并非同时显示。 因此，我一直在尝试在单击它们后添加他们需要的 class。

起初它工作得很好，但是当我将实际的数据文件（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 function 时，它们将被赋予 class 并根据以下代码设置样式：

$('.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 完成和向您的代码中添加这些类/样式的调用之间进行了竞争。

由于您所显示的内容没有任何变化（它始终是相同的类和样式），我建议修改创建这些按钮的任何代码（客户端或服务器端），以便它包含所有必要的类（包括一个设置样式，而不是使用内联样式）。

如果由于某种原因不能这样做，则需要修改代码以等待 ajax 完成，然后再将类/样式添加到它们。 理想情况下，您可以通过修改执行 ajax 的代码来做到这一点，这样它就会调用您的代码，在完成后添加类/样式。

如果您不这样做，您可以使用 hack：jQuery 提供“ajax 成功”回调，您可以通过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. 为什么不调用加载的整个数据？ 然后存储在一个对象（哈希表或其他）中并根据键访问此数据......您将键作为数据属性存储在按钮中的位置，以便您知道要显示哪些数据以及何时显示。