Fire onClick event jQuery Mobile Select Menu

Question

jQuery Mobile gives us these nice custom select menus where the menu comes 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).

Answer 1

Rather 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.net/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.net/PQ39n/ (same demo as above)

In this example .on() is the same as .delegate().