jQuery Mobile gives us these nice custom select menus where the menu es in as an overlay. I'm trying to attach an onclick function to these options but since jQuery mobile replaces the option tags with their own generated tags. I can't seem to get the function to attach to the "options" (which are actually generated as styled links).
jQuery Mobile gives us these nice custom select menus where the menu es in as an overlay. I'm trying to attach an onclick function to these options but since jQuery mobile replaces the option tags with their own generated tags. I can't seem to get the function to attach to the "options" (which are actually generated as styled links).
Share Improve this question edited May 24, 2014 at 12:28 kviiri 3,3021 gold badge23 silver badges30 bronze badges asked Dec 15, 2011 at 18:43 zareefzareef 1191 gold badge2 silver badges7 bronze badges1 Answer
Reset to default 5Rather than binding to the click
event for the "fake-option" elements, how about binding to the change
event for the <select>
element:
$('#the-select').on('change', function () {
var $this = $(this),
val = $this.val();
});
Here is a demo: http://jsfiddle/PQ39n/
Note that .on()
is new in jQuery 1.7 and in this case is the same as .bind()
.
EDIT
If you do want to bind to the click
event for the "fake-option" elements:
$('#the-page').on('click', '.ui-selectmenu-list > li', function () {
alert('onClick = ' + $('#the-select').children().eq($(this).attr('data-option-index')).val());
});
Here is a demo: http://jsfiddle/PQ39n/ (same demo as above)
In this example .on()
is the same as .delegate()
.