Каскадное раскрывающееся меню - Как временно отключить событие изменения в раскрывающемся списке для управления параметрами - PullRequest
0 голосов
/ 18 июля 2011

Я построил каскадный выпадающий список в jquery, модифицированный из нескольких примеров.Я добавил функцию, позволяющую пользователю «выполнить резервное копирование» и повторно выбрать ранее выпадающий список.Это перезагружает следующий выпадающий список, а также очищает и отключает последующие.

http://jsfiddle.net/goodeye/gA6GZ/

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

Я отделил привязку .change (), а не связал ее.Раньше у меня была цепочка перед загрузкой опций выбора.Это помогло в первый раз, но не в последующие времена.

Для этой проблемы я специально ищу хороший подход к этой последовательности:

  • избежать изменения ()
  • обновить выпадающие списки
  • настроить изменение ()

Этот вопрос: Лучший способ удалить обработчик событий в jQuery? имеет unbind ()в качестве основного ответа, затем последующий ответ использовать live ().Подход live () использует класс, который немного смущает меня и не набирает столько голосов.

Воспроизвести:Выберите шаг 1, см. Шаг 2 огонь.Выберите шаг 2, см. Шаг 3 огонь.Выберите шаг 1 снова, см. Шаг 2 огонь.тогда начинается беда:Выберите шаг 2, см. Шаг 3 огонь дважды.Выберите шаг 3, см. Шаг 4 три раза.Снова выберите шаг 1, см. Шаг 2 дважды.и т.п.Это даже становится хуже;Я увижу шаг 3 пять раз.

Некоторые подробности:

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

Это начинается на стороне сервера, поэтому первый раскрывающийся список уже находится в HTML.Следующие три загружаются из (смоделированных) вызовов json.

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

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

Заранее спасибо за ваши идеи!

Ответы [ 2 ]

0 голосов
/ 20 июля 2011

Ну, у меня закончилось время, и мне пришлось его решать.Это было просто установить привязку один раз - и это все, что нужно было сделать.Таким образом, это решает проблему, и в этом случае не нужно было отвязывать / перепривязывать или использовать live ().

Выполните следующий код один раз.Он связывает выпадающие списки один раз и отключает 2-е, 3-е, 4-е до тех пор, пока каскад не начнет вызывать первый.Таким образом, привязка выполняется один раз, затем отключается значение true / false.

$('.ddStep1').change(getStep2);
$('.ddStep2').change(getStep3).attr('disabled', true);
$('.ddStep3').change(getStep4).attr('disabled', true);
$('.ddStep4').attr('disabled', true);

(В этом приложении последний выпадающий список не имеет события изменения; после выбора 4-го элемента имеется отдельная кнопка отправки)..)

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

Отвечая на первоначальный вопрос о временном отключении события (хотя это и не решение моей проблемы), я понял, как использовать live () из этого ответа,и думаю, что это будет путь: Лучший способ удалить обработчик событий в jQuery? Другой ответ на этот вопрос с использованием пространств имен тоже выглядит прилично.

0 голосов
/ 18 июля 2011

Что вы можете сделать, это использовать jQuery для проверки всех связанных изменений элемента, сохранить их в «автономном» массиве, отменить привязку, выполнить свои действия, а затем связать их.связанные события изменения, которые вы можете использовать:

var changeEvents = $(element).data("events").change;
jQuery.each(changeEvents, function(key, handlerObj) {
    alert(handlerObj.handler) // alerts "function() { alert('changed!') }"
    // also available: handlerObj.type, handlerObj.namespace
})
...