Добрый день. Причина в том, что вы заменяете DOM — все обработчики, привязанные к старым элементам, "падают". Решения (по убыванию рекомендуемости):
1) Использовать делегирование событий (лучше всего)
- Привязывайте обработчики к постоянному родителю (например document или контейнеру, который вы не меняете), а не к самим формам:
Пример:
$(document).on('submit', 'form.ajax', function(e){
e.preventDefault();
// обработка формы
});
- Тогда после замены контента новые формы будут автоматически обслуживаться.
2) Сделать функцию инициализации и вызывать её после подмены
- Вынесите всю логику из header-скрипта в функцию, доступную глобально, и вызывайте её после вставки нового HTML:
Пример:
function initForms(){
// отписываемся по namespace, чтобы не дублировать
$('form.ajax').off('submit.my').on('submit.my', function(e){
e.preventDefault();
// ...
});
// другие инициализации
}
// при первой загрузке
$(initForms);
// после AJAX-подмены
$('body').html(new_content);
initForms();
- Важно использовать namespace событий (.my), чтобы безопасно делать .off() и не получить дубли.
3) Подгрузить/выполнить скрипт заново (если он внешний)
- Если скрипт — отдельный файл, можно подгрузить его:
$.getScript('/js/header.js').done(function(){ /* опционально callback */ });
- Учтите кеширование (если нужно всегда заново — добавьте параметр ?_={timestamp} или используйте $.ajax({ dataType: 'script', cache: false, ... })).
4) Выполнить inline-скрипты из ответа вручную (редко нужно)
- jQuery при вставке html иногда не выполняет <script> так, как вы ожидаете. Можно отдельно извлечь и выполнить их через $.globalEval, но это менее безопасно и хуже с точки зрения поддержки:
$(new_content).filter('script').each(function(){
$.globalEval(this.text || this.textContent || this.innerHTML || '');
});
Дополнительные рекомендации
- Не заменяйте <body> целиком без крайней необходимости — лучше менять внутренний контейнер (#content), тогда часть приложений/событий останется.
- Всегда очищайте старые обработчики (namespaced .off) перед повторной привязкой, чтобы не получить множественные вызовы.
- Для SPA-подхода хорошая структура: при получении нового HTML парсить его и вызывать унифицированную функцию init(newRoot), которая инициализирует только новые элементы.
Итого: самый простой и надёжный путь — использовать делегирование ($(document).on(...)) или иметь функцию initForms(), которую вы вызываете после подмены контента. Если нужен пример для вашей конкретной разметки — пришлите фрагмент формы и код обработчика, помогу адаптировать.