jquery mobile -adding listener breaks native on-click behavior_问答_开发者

jquery mobile -adding listener breaks native on-click behavior

开发者 https://www.devze.com 2023-03-27 21:52 出处：网络

Adding a listener to the preActNav buttons in example below seems to break jQuery Mobile\'s default css which paints button blue on the on click event.

Adding a listener to the preActNav buttons in example below seems to break jQuery Mobile's default css which paints button blue on the on click event.

Am I doing this wrong or is there a more native way.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile.css" /> 
    <script type="text/javascript" src="jquery.mobile/jquery.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile.js"></script>
</head>
<body>

<div data-role="page" id="mainmenu">
    <div data-role="header" data-position="inline">
    <h1>Main Menu</h1>
    </div>
    <div class="ui-body ui-body-c">
    <div data-role="content">   

    <div data-role="navbar">
    <ul>
        <li><a href="#" data-theme="a"  data-seq='A' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavA">A</a></li>
        <li><a href="#" data-theme="a"  data-seq='B' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavB">B</a></li>
        <li><a href="#" data-theme="a"  data-seq='C' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavC">C</a></li>
        <li><a href="#" data-theme="a"  data-seq='D' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavD">D</a></li>
        <li><a href="#" data-theme="a"  data-seq='E' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavE">E</a></li>开发者_如何学运维;
        <li><a href="#" data-theme="a"  data-seq='F' class="preActNav" data-icon="arrow-d" data-transition="none" ID="preActNavF">F</a></li>
    </ul>
    </div>  

    <div id='groupA' class='preGroups'> 
        This is Group A</div>

        <div id='groupB' class='preGroups'> 
        This is Group B</div>

        <div id='groupC' class='preGroups'> 
        This is Group C</div>

        <div id='groupD' class='preGroups'> 
        This is Group D</div>

        <div id='groupE' class='preGroups'> 
        This is Group E</div>

        <div id='groupF' class='preGroups'> 
        This is Group F</div>

    </div>
</body>
</html>         

<script>        


$(document).ready(function () {


    /* Add a listner to Pre-Close Group buttons */
    $('a.preActNav').click(function() {         
        var group = ($(this).data('seq'));      
        currentTab = group;             
        $('.preGroups').hide();
        $('#group' + group).show();     
        return false;
    });         

});

</script>

The return false; in that event listener is stopping the "OS" event from applying the style.

See JavaScript: event.preventDefault() vs return false.

Best not to do that , but if you really must block the other handlers for some reason, you can apply the style manually:

/* Add a listner to Pre-Close Group buttons */
$('a.preActNav').click ( function () {
    $('a.preActNav').removeClass ('ui-btn-active');
    $(this).addClass ('ui-btn-active');

    var group = ($(this).data('seq'));
    currentTab = group;
    $('.preGroups').hide();
    $('#group' + group).show();
    return false;
} );

See it at jsFiddle.

This works...

Demo: http://jsfiddle.net/wdm954/9BRMk/3

$('a.preActNav').click(function() {      
    $('.preGroups').hide();
    var id = '#group' + $(this).attr('data-seq');
    $(id).show();
});

jquery mobile -adding listener breaks native on-click behavior

精彩评论

关注公众号

热门标签

图文推荐

jquery mobile -adding listener breaks native on-click behavior

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：