Как запустить js/jquery функцию после того, как содержимое страницы обновлено ajax-ом
 

Доброго времени суток.



У меня есть страница с таблицей с постраничной навигацией. Навигация по страницам происходит с помощью ajax - когда я кликаю по номеру страницы, запускается функция LoadContent(), которая обновляет содержимое страницы. Также я использую кое-какой jquery скрипт для того, чтобы модифицировать содержимое таблицы после того, как она загружена:

function addNamesAttr() {
        $('.MyTable tr)').each(function () { 
   $(this).attr('name', ''); // добавляет пустой атрибут name для каждой строки
});
        console.log('names are applied');
    }
    
    
    $( document ).ready(function() {
        addNames();
});

Проблема в том, что эта функция addNamesAttr() срабатывает только на первой странице, то есть до перехода по навигационным ссылкам. Когда я переходу на вторую страниц и далее, функция не срабатывает. Наверное, можно было бы вставить addNamesAttr() внутрь LoadContent() (после ajax события), но я не могу это сделать так как нет возможности изменить содержимое LoadContent() по причине того, что это встроенная функция в генератор кода, который я вынужден использовать для этого сайта (это scriptcase).

Я пытался запускать addNamesAttr() при клике по ссылкам навигации 2/3/... (у этих ссылок есть класс ".PageLink"), с помощью этого кода:

$( document ).ready(function() {
        $('.PageLinkClass').on('click', function() { 
            addNames();
        });
        });

но это не решает задачу, так как она запускается до того, как ajax-обновление страницы полностью выполнено. Так как же заставить addNamesAttr() запускаться на всех страницах?

mav1,
так в конец LoadContent и добавляйте свою функцию

Вообще все заменяется на странице или только содержимое какого-то элемента?

mav1, вот пример эмулирующий загрузку данных с сервера и пример отслеживания того момента "когда элемент изменился"... ;)

<div id='page'></div>
<button>Обновить</button>

<script>
const o = document.getElementById('page')
o.addEventListener('DOMSubtreeModified', function(){
	alert('Содержимое изменилось!')
})
document.querySelector('button').addEventListener('click', function(){
	page()
})
page()
function page() {
	setTimeout(() => {
		o.innerHTML = new Date().toString()
	}, 1000)
}
</script>

не могу модифицировать LoadContent(), по причине, указанной в первом сообщении, увы

mav1,
попробуйте внутрь положить ваш код:

$(document).on('DOMNodeInserted', '#scrollable', function() {
    ....
});

id="scrollable" поместите в тот блок, который хотите обновлять после подгрузки аякса.