Событие OnClick, option и Chrome. Лебедь, рак и щука.

Опубликовано Опубликовано в рубрике Easy Patch, jQuery

С того самого момента, как появились стандарты W3C, различные браузеры начали с удовольствием их нарушать или трактовать по-своему.

Сегодня речь пойдет о правильной организации работы динамического добавления одних DOM-элементов в другие DOM-элементы при помощи select.

Итак, пример: у нас есть какой-то div с id «applicate», в который добавляются элементы по выбору их из выпадающего списка select. Человек, разрабатывающий в FireFox, сразу же повесит на каждый option событие onClick() и соответствующую ему функцию:

function Applicate()
{
$('#applicate').append( $('#some_other_div') );
}

Казалось бы, жизнь прекрасна. Но не тут-то было. Приходит Chrome и говорит, что ничего не работает. Его можно понять! Его движок считает нелогичным событие клика мыши для опции выпадающего списка. Он считает, что гораздо лучше обрабатывать по событию изменения опции. Пойдем ему навстречу и заменим onClick на onChange. Однако мы должны знать, какую опцию выбрал пользователь. Значит, надо как-то выудить это значение. Тут нам поможет объектная ориентированность прекрасного фреймворка jQuery. Событие в коде изменит свой внешний вид с onClick() на onChange(this.value).

Таким образом, по изменению значения в select в выбранный div будет добавляться определенный DOM-элемент.

Дружба состоялась!

Безошибочного Вам кода!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *