jquery - 添加的类仅在单击链接两次后保留

Question

如标题所示，我正在使用 jQuery 和 jQuery Mobile 向导航栏中的链接添加一个类。不幸的是，该类已添加，但在页面加载完成后立即消失。一旦我第二次单击该链接，它就会被添加并保留。

我的导航栏看起来像这样:

<div data-role="header">
<div data-role="navbar" id="navbar">
    <ul>
        <li><a href="#find_food" id="find_food_link">Find something to eat!</a></li>
        <li><a href="#invite_food" id="invite_food_link">Invite people!</a></li>
        <li><a href="#messages" id="messages_link">Messages</a></li>
        <li><a href="#overlayPanel">Profile</a></li>
    </ul>
</div>

因为我想让所有子页面的导航栏都相同，所以我按照文档的建议将它放在 pages-div 之外但在 body-tag 内。我加载 header :

$(function(){
        $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
    });

最后，我尝试将“ui-btn-active”类添加到链接中:

$('#navbar').click(function(e){
    $(e.target.id).addClass("ui-btn-active");
})

如果我使用 e.preventDefault() 它会停止加载链接(如预期的那样)并且不再起作用。感谢您的帮助!

Answer 1

你可以使用 pagecontainer 小部件的 transition event 在所有转换完成后添加类:

$(document).on("pagecreate","#find_food", function(){ 

    $( ":mobile-pagecontainer" ).on( "pagecontainertransition", function( event, ui ) {
        var pID = ui.toPage.prop("id");
        $('#navbar [href="#' + pID + '"]').addClass("ui-btn-active");
    });

});

DEMO