Почему Select не генерирует события?

Question

[Tiamorphis]

Есть форма и в ней два связанных селекта - гостиница и номер www.1arbat-hotel.ru/bron.html
Выбираем гостиницу - получаем список типов номеров. Селект с номерами подменяется на соответствующий выбранной гостинице. Так вот, есть задача повесить событие на выбор определённого типа номера, казалось бы, чего проще - обращаешься по id к нужной option и вперёд?

Но затык в том, что второй селект не желает генерировать события. Либо их что-то перехватывает... Пробовал разные - и click и change - ничего не происходит. По началу грешил на cursel (плагин для украшения инпутов) но отключение его для этого селекта ничего не дало. Селект с гостиницам всё отрабатывает, а этот, по конструкции точно такой же, но с другим id - нет. Помогите нубу, кто чем может! Куда смотреть, чего искать?

Answer 1

[Юрий Лобанов]

Ну Вы обработчик события весите при загрузке страницы, а потом селект подменяете. Вот когда подменяете, тогда и надо весить обработчик.

Comments

[Tiamorphis]

Но ведь у селекта id не меняется, да и подменяется он после выбора определённой гостинницы, а не генерирует сразу, изначальный, неподмененый который ещё, с одним пунктом - "Выбрать". Вот в чём загвоздка...

[Юрий Лобанов]

@Tiamorphis поверьте, я знаю о чем говорю. Вы добавляете новый элемент, и на него не навешан обработчик.
Смотрите мой ответ ниже.

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/b55N5
jsfiddle.net/iiil/b55N5/1
Вот, сравните два варианта. В первом меняем первый селект, добавляется третий. Но алерт выскакивает только на втором.
Во втором варианте алерт работает и в том, что был - втором. И в новом - в третьем.

Comments

[Tiamorphis]

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

Answer 3

[Pozadi]

Попрубуйте подписываться на собыия так:

$(document).on('change', '#number-select', function(){
   alert($(this).val());
});

Тогда не будет разницы сколько раз вы удаляил или заменяли элемент. Это работает потому что события "всплывают" по DOM-дереву, и вы слушаете на самом высоком уровне. Но при этом фильтруете все события "change", оставляя только те которые изначально произошли на #number-select.

Comments

[Tiamorphis]

Тоже вариант - Спасибо!