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

时间:2012-02-03 20:58:45

标签: jquery select mobile menu jquery-mobile

使用选择菜单,如:

<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桌面都会发生。如何同时触发主题和点击事件?

2 个答案:

答案 0 :(得分: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/

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

答案 1 :(得分:0)

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

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