jQuery Mobile 选择菜单点击事件怎么触发？

Question

jQuery Mobile为我们提供了漂亮的自定义选择菜单，其中菜单作为叠加层出现。我正在尝试将onclick函数附加到这些选项上，但由于jQuery Mobile用它们自己生成的标签替换了选项标签，我似乎无法使函数附加到“选项”上（它们实际上被生成为带样式的链接）。

- zareef

Answer 1

不要将“fake-option”元素绑定到click事件上，而是将其绑定到<select>元素的change事件上：

$('#the-select').on('change', function () {
    var $this = $(this),
        val   = $this.val();
});

这里有一个示例：http://jsfiddle.net/PQ39n/ 请注意，.on() 是 jQuery 1.7 中新增的方法，在本例中与 .bind() 相同。

编辑：

如果你想绑定“fake-option”元素的 click 事件：

$('#the-page').on('click', '.ui-selectmenu-list > li', function () {
    alert('onClick = ' + $('#the-select').children().eq($(this).attr('data-option-index')).val());
});

这里有一个演示：http://jsfiddle.net/PQ39n/（与上面的演示相同）。

在这个例子中，.on() 和 .delegate() 是相同的。

- Jasper

---

绑定到选择器的“change”事件是一个不错的备选方案，但它并不总是有用，因为它的响应非常缓慢。如果你想要提供触觉反馈（在选项选择时振动），那么等待选择菜单改变值后再提供反馈就没有用了。 - Wytze