Элемент показывает, а затем скрывает Jquery Mobile - PullRequest
Новая
       18

Элемент показывает, а затем скрывает Jquery Mobile

2 голосов
/ 05 марта 2012

Я использую следующее событие и пытаюсь скрыть кнопку, если порядковый номер не равен -1 

 $('#ordPage1').live('pageshow',function(event){
            //$('#btnRegisterVisit').hide();    
            //alert(sessionStorage.OrderNo);
            if(sessionStorage.OrderNo!= -1){
                $('#btnRegisterVisit').hide();
                //alert("test");
            }
            else{
                $('#btnRegisterVisit').show();
            }
    });

Но моя проблема в том, что при загрузке страницы кнопка появляется, а затем мгновенно исчезает,Есть ли способ вообще не показывать кнопку.Кнопка отображается в пользовательском интерфейсе, а затем исчезает, что может вызвать проблемы, поскольку пользователь может щелкнуть ее.

Может кто-нибудь мне помочь.Заранее спасибо.

Ответы [ 5 ]

1 голос
/ 15 августа 2012

Попробуйте вместо этого использовать pageinit 

$(document).bind('pageinit', function(){
    if(sessionStorage.OrderNo!= -1){
           $('#btnRegisterVisit').hide();
            //alert("test");
     }
     else{
           $('#btnRegisterVisit').show();
     }
 });

из http://jquerymobile.com/test/docs/api/events.html

Внимание! Используйте $ (document) .bind ('pageinit'), а не $ (document).ready ()

Первое, что вы узнаете в jQuery, - это вызов кода внутри функции $ (document) .ready (), чтобы все выполнялось сразу после загрузки DOM.Однако в jQuery Mobile Ajax используется для загрузки содержимого каждой страницы в DOM во время навигации, а обработчик готовности DOM выполняется только для первой страницы.Чтобы выполнить код всякий раз, когда новая страница загружается и создается, вы можете привязаться к событию pageinit.Это событие подробно объясняется внизу этой страницы.

Если вы пробовали pageinit, и оно не работает.Вы также можете попробовать использовать pagebeforeshow

$('#ordPage1').live('pagebeforeshow',function(event){
        //$('#btnRegisterVisit').hide();    
        //alert(sessionStorage.OrderNo);
        if(sessionStorage.OrderNo != -1){
            $('#btnRegisterVisit').hide();
            //alert("test");
        }
        else{
            $('#btnRegisterVisit').show();
        }
});

pagebeforeshow - Сработает на «toPage», на которую мы переходим, до того, как анимация фактического перехода будет запущена.Обратные вызовы для этого события получат объект данных в качестве своего второго аргумента.

1 голос
/ 05 марта 2012

Не могли бы вы просто вставить #btnRegisterVisit { display: none; } в свой файл CSS?

0 голосов
/ 15 августа 2012

Свяжите это с событием pagebeforeshow. 

 $('#ordPage1').live('pagebeforeshow',function(event){
        //$('#btnRegisterVisit').hide();    
        //alert(sessionStorage.OrderNo);
        if(sessionStorage.OrderNo!= -1){
            $('#btnRegisterVisit').hide();
            //alert("test");
        }
        else{
            $('#btnRegisterVisit').show();
        }
});
0 голосов
/ 15 августа 2012

посмотрите на это:

Важно: используйте $ (document) .bind ('pageinit'), а не $ (document) .ready ()

Найденона мобильном телефоне jQuery

0 голосов
/ 05 марта 2012 
<html>
<head>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>

    <span>Once</span> <span>upon</span> <span>a</span> 
    <span>time</span> <span>there</span> <span>were</span> 
    <span>three</span> <span>programmers...</span>

  </div>
<script>
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

</script>
</body>
</html>
...