Ajax: пользовательский стиль исчезнет после того, как ajax вызов перезагрузится в таблицу

Question

Я создаю собственный стиль для данных Arcadia (BI Tool). Я заметил, что после того, как я попытался развернуть столбец таблицы или перейти на страницу 2 таблицы, он вернется к своей исходной таблице стилей, и мой пользовательский js перестанет работать.

Например, у меня есть 3 таблицы на странице

<div>
.. table 1 ..
</div>
<div>
table 2 ..
</div>
<div>
table 3 ..
</div>

после загрузки страницы все пользовательские стили / js прекращают работу. В сценарии, где таблица 2 состоит из 10 страниц, 10 данных загружаются на страницу. как только я нажимаю на следующую страницу, когда данные загружаются, моя js остановка.

я попробовал document.ready, предотвращение дефолта. Все попытки не удалось запустить огонь js после загрузки данных. когда таблица загружается впервые, в каждом столбце будет отображаться текст «тест». Проблема начинается, когда данные перезагружаются без ссылки на страницу sh, она возвращается в исходное расположение.

f.afterDraw = function () {
 const evt = d3.selectAll("#" + arcapi.chartId() + " span.crosstab-expand")
 const chChange = d3.selectAll("#" + arcapi.chartId() + " td.viz-td- header").append('div').attr('class','roger').text("test")



$( document ).ajaxComplete(function() {
           // chChange.style('background','red')
          let b = d3.selectAll("#" + arcapi.chartId() + " td.viz-td- header").append('div').attr('class','roger').text("test")
            console.log('data fired')
          });


 };

Затем я сделал .ajaxComplete. console.log запускает мой журнал, но не сохраняет div, который я добавил в свою таблицу после перезагрузки данных.

Решение 2, которое я пробовал, использовало document.ready, журнал запускается, но структура dom возвращается к своему первоначальному стилю, в котором нет добавленного div i

$(document).ready(function(){
          $("#" + arcapi.chartId()).on('click',function(){
            const chg = d3.selectAll("#" + arcapi.chartId() + " td.viz-td-header").append('div').attr('class','roger').text("test after change")
            console.log("call")
          });

как мне сохранить текст после перезагрузки ajax?

Обновление:

f.afterDraw = function () {
     const evt = d3.selectAll("#" + arcapi.chartId() + " span.crosstab-expand")
     const chChange = d3.selectAll("#" + arcapi.chartId() + " td.viz-td-header").append('div').attr('class','roger').text("test")


    let bg = d3.select("#" + arcapi.chartId())


  $(document).ajaxStart(function(){
    console.log('starting')
  });

  $(document).ajaxComplete(function(){
     bg.style('background','grey')
    console.log('completed')
  });
  };

Я пытался применить пользовательский цвет после завершения ajax. он может изменить цвет фона. как только я добавлю ячейку таблицы, она вернется обратно.