元素显示然后隐藏 Jquery Mobile答案

【问题标题】：Element shows and then hides Jquery Mobile元素显示然后隐藏 Jquery Mobile
【发布时间】：2012-03-05 08:39:43
【问题描述】：

如果订单号不等于-1，我正在使用以下事件并尝试隐藏按钮

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

但我的问题是当页面加载时，按钮显示然后立即消失。有没有办法根本不显示按钮。按钮显示在 UI 上然后消失可能会导致问题，因为用户可能会单击它。

谁能帮帮我。提前致谢。

【问题讨论】：

您是否尝试过 pageinit 事件？也许更多的代码 cpuld 会有用。
我试过pageinit，效果一样。 PageCreate 不会触发该事件。
我根据您粘贴的代码创建了一个示例，它似乎工作正常。这是链接-jsfiddle.net/wGL3b。所以可能是其他原因。如果可能，请发布一些额外的代码.

标签： jquery events jquery-mobile

【解决方案1】：

你能把#btnRegisterVisit { display: none; }放在你的CSS文件里吗？

【讨论】：

不，这没用。相反，它使按钮看起来很奇怪，没有背景，只有带有轮廓的文本。

【解决方案2】：

尝试使用 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”上触发。此事件的回调将接收一个数据对象作为其第二个参数。

【讨论】：

谢谢！对于后代，我最终做的是将我的隐藏事件绑定到 pagebeforeshow。事实上，事件已经绑定到 pagebeforeshow，但为了消除“闪烁”，我必须将隐藏事件移至这些方法的顶部。显然，在这些调用之前执行的其他代码足以延迟调用，仅足以显示按钮几分之一秒。我不能说它对每个人都有效，但如果你有同样的问题，试试这个。

【解决方案3】：

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

【讨论】：

【解决方案4】：

看看这个：

重要提示：使用 $(document).bind('pageinit')，而不是 $(document).ready()

在 jQuery Mobile 文档中找到

【讨论】：

【解决方案5】：

将其绑定到 pagebeforeshow 事件。

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

【讨论】：