2012-04-24 3 views
4

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

HTML:

<select id="mySelect" name="mySelect"> 
    <option class="mylistitem" value="0" selected="selected">Option 0</option> 
    <option class="mylistitem" value="1">Option 1</option> 
    <option class="mylistitem" value="2">Option 2</option> 
</select>​ 

JS:

$("#mySelect").live("change", function() { 
    alert($("#mySelect").val()); 
}); 

http://jsfiddle.net/pioSko/tcWRP/38/ или

ОБНОВЛЕНО: Комбинированное оба ответа;) http://jsfiddle.net/pioSko/tcWRP/60/

$(document).delegate('#mySelect-menu li', 'vmousedown', function (event) { 
    if ($(this).attr('aria-selected') === 'true') { 
     $('#mySelect').trigger('change'); 
    } 
}); 
+0

Просто в качестве уведомления: Если вы снова выбрать ту же опцию, то браузер будет отмечен как неизменные. Поэтому событие onChange() не будет запущено. – reporter

+0

Я знаю, это моя проблема :) – pioSko

ответ

2

Если вас нас e в меню нативного выбора, вы быстро столкнетесь с проблемами. Но если вы используете меню выбора стиля jQuery Mobile, вы можете привязать обработчики событий к виджету меню, поскольку он сделан из DIV и SPAN.

$(document).delegate('#mySelect-menu li', 'vmousedown', function (event) { 
    if ($(this).attr('aria-selected') === 'true') { 
     alert('That is already selected.'); 
    } 
});​ 

Вот демо: http://jsfiddle.net/ys8Kh/

Основная идея заключается в том, чтобы отслеживать клики по элементам «Option» (на самом деле список-элементов) в пользовательском меню выбора и проверить атрибут area-selected, чтобы увидеть, если элемент уже выбран. Это значение автоматически обновляется jQuery Mobile.

Обратите внимание, что #mySelect-menu является элементом UL, который создается как пользовательский интерфейс меню выбора для меню выбора jQuery Mobile. Также обратите внимание, что vmousedown - это обычное событие jQuery Mobile, которое помогает работать с событиями мыши и касания. Я выбрал vmousedown, потому что он срабатывает до того, как значение select изменилось, поэтому мы можем увидеть, был ли выбран элемент click ed.

Кроме того, чтобы принудительно использовать нестандартные виджеты, добавьте этот атрибут в тег SELECT: data-native-menu="false".

+0

Фантастический! Благодаря :) – pioSko

2

то, что я обычно делаю вызов $("#mySelect").trigger('change'), который будет вызывать код, если пользователь изменил его к текущему значению

Смежные вопросы