Ищем ...
вторник, 10 июня 2014 г.

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


При разработке javascript корзины заказов на сайт, столкнулся с многократной отправкой  запросов по нажатию по кнопке с событием bind.

Условие при которых это происходило:
  • многократный рендеринг всплывающего окна на JS.
  • поведение элементов окна программируется на jquery с использованием ajax-запросов getJSON.
Но если сабмитить форму мышкой и повторить цикл несколько раз, то скрипт “накапливает” все методы обработки. По крайней мере каждый следующий раз каждый клик срабатывает два-три-и т.д. раз при этом сам HTML нормально вставлен один раз. Кстати, этот косяк удалось заметить только благодаря IE =) и счастливому случаю (после успешного сабмита отчищались буферные данные, и последующая итерация сабмита с пустыми данными возвратила ошибку) т.к. Chrome, Opera, Firefox видимо одинаковый запросу не пропускала или хз =) 

Как побеждали:
Добавления e.preventDefault() отсекло Chrome, Opera, Firefox (стал генерироваться только один запрос). Но проблема оставалась с IE и Safari.
Оказывается каждый раз обработчик  кнопки добавлялся к существующему при отрисовке (подгрузке всплывающего окна), а его надо отчищать от события чтоб избежать наслоения с помощью bind — unbind, для live — die.
Делать это можно каждый раз перед определением обработчика.

$('#submit-form').unbind('click');
$('#submit-form').bind('click', function(e){
            BootCart.processing();
 - - - - - - 
 ......
e.preventDefault(); 
}

Так работает нормально
 
Вверх!