Стилизация Bootstrap-таблиц после AJAX

Question

Я работаю над сайтом, созданным в WordPress / WooCommerce. Я не задавал этот вопрос на WordPress-StackExchange, поскольку этот вопрос не касается части WordPress / WooCommerce.

На сайте есть несколько <table>, которые нуждаются в стилизации. Поэтому я добавил этот jQuery-фрагмент, чтобы добавить класс .table ко всем таблицам ( здесь ).

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

Однако ... На одной из страниц (корзина) есть AJAX-запрос, который обновляет корзину. И когда он возвращает новую информацию, то таблица больше не имеет класс (или стили).

Я бы не хотел стилизовать эту таблицу вручную, когда что-нибудь «прямо там», доставлено из Bootstrap.

Я рассмотрел эти два варианта:

• А) Добавить что-то в мой скрипт, который проверяет AJAX-запрос или что-то в этом роде? И если так, - как мне это сделать?

или

• B) Сделайте что-нибудь, чтобы Bootstrap-стили применялись ко всем <table> -элементам (а не только <table class='table'> -элементам? И если да, то - как мне это сделать? Изменение bootstrap.min.css выглядит следующим образом плохая идея.

Они оба кажутся хакерскими / неуклюжими. Мне не хватает лучшего способа сделать это?

Answer 1

вы можете использовать ajaxComplete

эта работа после завершения каждого ajax-запроса.

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