Question

使用选择菜单，如：

<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 =＆＃34; false＆＃34; click事件不会触发，但主题很好地应用于上面的选项

当我设置data-native-menu =＆＃34; true＆＃34;触发click事件，但菜单下拉时主题不会应用于选项。

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

Answer 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/

我还清理了一下这个功能。请随意查看和使用。

Answer 2

您可以尝试使用change中的select事件并禁用原生菜单。

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

jquery移动问题与选择菜单的主题

2 个答案: