选择菜单主题的jQuery移动问题答案

【问题标题】：jquery mobile problems with themes for select menu选择菜单主题的jQuery移动问题
【发布时间】：2012-02-03 20:58:44
【问题描述】：

使用如下选择菜单：

<link href="../Style/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<div data-role="content">
    <select name="select-choice-cognitive" id="select-choice-cognitive" data-theme="b" data-icon="gear" data-inline="false" data-native-menu="false" >
            <option class="cognitivelist" value="ce">Option 1</option>
            <option class="cognitivelist" value="cnc">Option 2</option>
            <option class="cognitivelist" value="cdr">Option 3</option>
    </select>
</div>

当用户点击一个选项时，会触发以下点击事件：

$(".cognitivelist").click(function (event) { //all items with the class .lessonlist  click event
        strname = (this.value)
        var pt='../Programs/'+ strname +'/' + strname +'.htm'
        window.location.href(pt);

    });

当我设置 data-native-menu="false" 时，点击事件不会触发，但主题很好地应用于上面的选项

当我设置 data-native-menu="true" 时，点击事件会触发，但当菜单下拉时主题不会应用于选项。

这发生在 IE 和 Chrome 桌面中。如何同时触发主题和点击事件？

【问题讨论】：

标签： jquery select mobile menu jquery-mobile

【解决方案1】：

$("#select-choice-cognitive").change(function (event) { //all items with the class .lessonlist  click event
    var strname = $(this).val(),
        pt='../Programs/'+ strname +'/' + strname +'.htm';
    window.location.href(pt);

});

无论有没有，这都应该可以解决问题。您想使用更改功能而不是单击功能。然而，确实可以将 click 函数应用于任何 html 元素，但浏览器并不总是能很好地运行。从某种意义上说，使用更改更适合您的情况，在这种情况下是选择下拉菜单。

http://api.jquery.com/change/

我还稍微清理了一个函数。请随意查看和使用。

【讨论】：

【解决方案2】：

您可以尝试在禁用原生菜单的情况下使用来自select 的change 事件。

$("#select-choice-cognitive").change(function() { alert($(this).val()); });

【讨论】：