JQuery неисправность после АЯКСА нагрузки

Question

У меня есть вопрос, где сейчас я использую slidetoggle, чтобы скрыть/раскрыть свою основную навигацию:

$("#menu_block_button").click(function(){ 
    $("nav #block-menu-block-2 > div > div > ul").slideToggle(); 
}) 

Он работает отлично, пока я не загружать Аякс на этой странице. Он будет выполнять переключение дважды, когда после этой точки. Я предполагаю, что сценарий загружается снова после ajax.

Что можно сделать, чтобы удалить событие, прежде чем запускать его?

Answer 1

Если это единственный слушатель для этого конкретного элемента, и это AJAX, что это проблема, то в конце вашей функции успеха вашего запроса AJAX, добавьте этот код:

$("#menu_block_button").off();  
$("#menu_block_button").click(function(){ 
    $("nav #block-menu-block-2 > div > div > ul").slideToggle(); 
}) 

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

$("#menu_block_button").off();  

Answer 2

Для привязки и разрывания обработчики могут принести неприятности. Гораздо лучше использовать делегированные события.

События отправляются снизу вверх из элементов в дереве DOM. Обработчик событий делегата прикрепляется к контейнеру элементов, которые будут запускать обработанное событие. Когда событие запускается, оно не обрабатывается в самом элементе, но пузырится до тех пор, пока оно не достигнет контейнера, который должен обработать его. Таким образом, контейнер отвечает за обработку события. (Контейнер «знает», какой элемент вызвал событие, поэтому он может решить, обрабатывает он это или нет, в зависимости от селектора).

Если вы выбрали контейнер, который не заменен обновлениями AJAX, вам не нужно беспокоиться о привязке и развязывании обработчиков после обновлений ajax.

Как вы это делаете? Это зависит от версии jQuery.

Раньше .live() или, предпочтительно .delegate()

.live(): Приложить обработчик события для всех элементов, которые соответствуют текущему селектор, теперь и в будущем. (Устаревший в 1.7, удалить в 1.9)

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

Теперь, рекомендуемый способ сделать это является on():

.on(): Приложить функцию обработчика событий для одного или нескольких событий для выбранных элементов.

Для использования on(), вы должны сделать это:

$('container selector').on('event','triggers selector', 'handler')

Например, чтобы использовать функцию clicked манипулятора все ссылки (a элементы) внутри DIV с идентификатором navbar:

$('div#navbar').on('click', 'a', clicked);

Вы можете сделать этот звонок только один раз, и он будет продолжать работать, если navbar div isn Обновлено в обновлениях AJAX. (Если этот div обновлен, выберите внешний элемент, который не является! Вы всегда можете выбрать тело, но лучше всего обращаться с ним как можно ближе к триггеру)

ПРИМЕЧАНИЕ: если вы используете event.stopPropagation() в любой точке , событие перестает библировать дерево DOM. Если вы не вызываете его, и есть другие делегированные события для одного и того же события, событие будет обработано снова.

ПРИМЕЧАНИЕ. Это также интересно для обработки событий, которые могут запускаться множеством различных элементов. Например, если у вас есть таблица со многими строками, которые имеют несколько ссылок в каждом из них и хотят обрабатывать щелчок по этим ссылкам, лучше привязать один обработчик к таблице, чем привязать триггер для всего этого элементы.

Answer 3

Связывание и открепление этого элемента - полоса. ИМО вы должны проверять свой код и реорганизовывать его, чтобы он не выполнялся дважды. В противном случае вы, вероятно, будете иметь множество других побочных эффектов. Если вы разместите свой код, я, вероятно, скажу, в чем проблема.