jquery - AJAX 之后的 Bootstrap 表样式

Question

我正在开发一个用 WordPress/WooCommerce 构建的网站。我没有在 WordPress-StackExchange 上问这个问题，因为问题与 WordPress/WooCommerce 部分无关。

在网站上，有几个<table>的，需要造型。所以我添加了这个 jQuery 片段，添加 .table -class 到所有表 ( found here )。

jQuery(document).ready(function(){
  // Make all tables into Bootstrap-tables
  jQuery( 'main' ).find( 'table' ).each( function() {
      jQuery( this ).addClass( 'table' );
    }
  );
});

但是...在其中一个页面(购物车)上，有一个更新购物车的 AJAX 请求。当它返回新信息时，表不再具有类(或样式)。

我不想手动设置该表的样式，因为一切都“就在那里”，由 Bootstrap 提供。

我考虑了这两个选项:

• A) 在我的脚本中添加一些内容来检查 AJAX 请求或类似的内容？如果是这样，-我该怎么做？

或

• B) 做一些事情，以便 Bootstrap 样式应用于所有 <table> -elements(而不仅仅是 <table class='table'> -elements？如果是这样，-我该怎么做？更改 bootstrap.min.css 似乎是一个坏主意。

他们看起来都很老套/笨拙。我是否缺少更好的方法？

Answer 1

您可以使用ajaxComplete

当每个 ajax 请求完成时，此工作就会起作用。

$( document ).ajaxComplete(function( event, xhr, settings ) {
      $("table").addClass("table");
});