jquery mobile -adding listener가 네이티브 on-click 동작을 깨뜨림

아래 예제의 preActNav 버튼에 리스너를 추가하면 jQuery Mobile의 기본 CSS 인 break가 발생하여 클릭 이벤트가 파란색으로 표시됩니다.jquery mobile -adding listener가 네이티브 on-click 동작을 깨뜨림

내가 잘못했거나 더 원시적 인 방법이 있습니다.

<!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>

출처

2011-08-15 bob

이 작동 ...

데모 : http://jsfiddle.net/wdm954/9BRMk/3

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

출처

2011-08-15 07:26:40 wdm

해당 이벤트 리스너의 return false;이 스타일을 적용에서 "OS"이벤트를 중지하고 있습니다.

JavaScript: event.preventDefault() vs return false을 참조하십시오.

최저하지 그렇게,하지만 당신이 정말로 어떤 이유로 다른 핸들러를 차단해야하는 경우, 수동으로 스타일을 적용 할 수 있습니다

/* 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.

을

출처

2011-08-15 08:53:24

jquery mobile -adding listener가 네이티브 on-click 동작을 깨뜨림

답변

관련 문제