Событие jQuery запускается несколько раз

У меня проблема с событиями jQuery.

Сначала позвольте мне объяснить настройки страницы:

Файл main-page.php состоит из:

а) заголовок (где логотип)

б) навигационная панель (где различные варианты выбора)

c) область динамического содержимого (где будет загружено содержимое элемента, по которому щелкнули, на панели навигации)

г) нижний колонтитул

Допустим, что навигационная панель состоит из | ГЛАВНАЯ | СООБЩЕНИЯ | О НАС | …

Содержимое HOME представляет собой отдельный файл PHP, с отдельным файлом CSS и JS. То же самое касается всех выборов.

Как только я выбираю HOME (например), я удаляю любой контент из области DYNAMIC CONTENT и помещаю контент HOME, используя AJAX. В то же время я удаляю все файлы CSS / JS, связанные с предыдущим контентом, и связываю файлы CSS / JS, связанные с загруженным. Эта часть работает отлично.

Теперь, если я переключусь с одного выбора на другой выбор (скажем, из ДОМА -> СООБЩЕНИЯ -> О НАС, а затем вернусь в ДОМОЙ), если я нажму на кнопку внутри ДОМА, он вызовет событие несколько раз. Это еще хуже, если это событие вызывает AJAX-вызов на сервер (представьте, что вы вызываете сервер 5 раз вместо 1).

** Причина, по которой я использую событие on () для элемента с классом радиоэлемента, заключается в том, что это будущий элемент DOM. Изначально этого элемента нет на странице.

Пример кода JS:

$(document).on('click', '.radio-element', function(){

$.ajax({

url: "js/ajax/ajaxcall.php",
success: function(output){

$('#ajaxcall-container').html(output);

}
});

});

Что я делаю, так это, как только я щелкаю элемент с классом radio-element, я захожу на сервер и извлекаю выходные данные скрипта ajaxcall.php.

Наблюдая за вкладкой NETWORK внутри INSPECT ELEMENT, я вижу, что событие click выполняет вызов AJAX несколько раз. Несколько раз 2, другие 3 или даже 5.

Что я сделал, чтобы решить проблему (ни один из них не работает на 100%):

A) открепите событие перед тем, как связать его, используяот«

$(document).off('click','.radio-element').on('click', '.radio-element', function(){ .... });

Б) Используйте событие.stopImmediatePropagation ()

$(document).on('click', '.radio-element', function(event){

event.stopImmediatePropagation();

//rest of code

});

Ниже приведено решение, которое я еще не пробовал, поскольку прочитал в статье, что оно не остановит процесс привязки событий, а просто предотвратит выполнение нескольких событий (не знаю, вызовет ли это другие проблемы).

$(document).on('click', '.radio-element', function(event){

if(event.handled !== true)
{
//Code goes here
event.handled = true;
}

});

Проблема с запуском нескольких событий заключается в том, что существуют вызовы AJAX, которые выполняют действия, которые не должны выполняться более одного раза (например, отправлять электронную почту клиентам).

Кроме того, я не могу предсказать это поведение (запуск нескольких событий). Иногда это работает нормально, некоторые другие запускают событие 5 раз подряд.

Я искал в Интернете уже неделю, но все, что я пытался, не решило проблему. Любое решение будет высоко ценится 🙂

Спасибо!

$('#element').unbind().click()
{
//write something here
}

$('#element').Off().click()
{
//write something here
}