Блог

В настоящее время я работаю над небольшим веб-сайтом «Скоро» с функцией подписки на рассылку новостей. У меня есть поле ввода с кнопкой отправки, которая отправляет данные через запрос ajax, и поэтому я добавил прослушиватель событий, прослушивающий событие «click» на этой кнопке.

Поскольку я хотел работать с «одной страницей», я загружаю сайт imprint и privacy с помощью запроса ajax и заменяю innerHTML основного содержимого веб-сайта. Для возврата на основной сайт я снова перезагружаю основной контент с помощью запроса ajax и снова заменяю конфиденциальность или отпечаток innerHTML.

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

Я попытался вызвать функцию, которая добавляет EventListeners после загрузки запроса ajax и установки innerHTML. Я пробовал это с помощью jQuery и простого javascript, оба не сработали.

Я также проверил в инструментах разработчика Chrome, есть ли EventListeners. Непонятно, что отображаются оба EventListeners, если я добавляю их с помощью кода, написанного с помощью jQuery, но они, похоже, не работают. Если я выполняю функцию, написанную на обычном javascript, EventListener («click», subEmail()) удаляется.

функция, написанная с помощью jQuery:

 var btn = document.getElementById("form-submit");
function addListeners() {
    $(document).on('click', btn, function(){
        subEmail();
    });
    $(document).on('resize', document, function(){
        checkScreenSize();
    });
}
addListeners();
  

функция, написанная на обычном javascript:

 var btn = document.getElementById("form-submit");
function addListeners() {
    btn.addEventListener("click", subEmail());
    window.addEventListener("resize", checkScreenSize());
}
addListeners();
  

вызов функции в запросе ajax:

 function loadInfo(loadArg) {
    var bg = document.getElementById("bg");

    loadAJAX = new XMLHttpRequest();
    loadAJAX.onreadystatechange = function() {
        if (this.readyState == 4 amp;amp; this.status == 200) {
            gsap.to("#bg-cont, #bg-legal, #bg-cover", {scale: 3, duration: 0.3, opacity: 0, onComplete: function() {
                bg.innerHTML = loadAJAX.response;
                addListeners();
            }});
        }
    }
    loadAJAX.open("POST", "/"   loadArg   ".php", true);
    loadAJAX.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    loadAJAX.send();
}
  

Заранее спасибо за советы и хитрости, которые я мог бы попробовать, чтобы заставить эту функцию работать! 🙂

~ Андреас