jQuery событие срабатывает несколько раз

Question

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

Прежде всего позвольте мне объяснить настройку страницы:

Главный-page.php состоит из:

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

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

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

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

Допустим, что navbar состоит из | ГЛАВНАЯ | СООБЩЕНИЯ | О КОМПАНИИ | ...

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

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

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

      }    
    }); 

}); 

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

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

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

A) синхронизироваться событие, прежде чем его связывания с использованием «от»

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

B) Использование события. 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 раз подряд.

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

Спасибо!

Answer 1

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

Вы можете проверить эту теорию, добавив console.log внутри события click (выше ajax) и обмануть его и проверить журналы. Если вы нажмете на него, и он регистрирует все, что вы регистрировали более одного раза, то вы знаете, что это проблема. Я не думаю, что это аякс.

Answer 2

Мое предположение, основанное на вашем описании, заключается в том, что вы не удаляете прослушиватели событий. Поэтому каждый раз, когда вы переключаете вкладку/страницу, одно и то же событие будет добавляться снова и снова. Даже если вы пытались это сделать, что-то не так. Я сомневаюсь, что это имеет какое-то отношение к Ajax.

Answer 3

Я также сталкивался с той же проблемой довольно долгое время. Я решил это, отменив все события, связанные с элементом, перед выполнением новых обработчиков событий. Использование так:

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

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

Если вы используете JQuery версии 1.7+ вы можете использовать выключатель(), как этот

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