pagebeforeshow事件在通話結束後沒有被激活

我剛剛開始在jQM開發中並且遇到了一些磚牆問題。pagebeforeshow事件在通話結束後沒有被激活

總之，我有一個JavaScript文件和兩頁。在主頁面（index.html）中，我動態地填充了一個listview，併爲這個listview的每個項目註冊了tap事件。作爲回報，輕拍事件將changepage方法調用到外部頁面（details.html）。這工作正常100％的時間。

在JavaScript文件中，我在pagebeforeshow上爲details.html頁面註冊了事件。這可以在第一時間正常工作，但任何後續調用都不會觸發pagebeforeshow事件。經過仔細觀察，我可以看到pagechange正在被調用，pagebeforechange事件被解僱了，但是pagebeforeshow只是針對那個特定的項目被觸發（直到完成刷新）。

我已經爲您設置了一個示例以供您查看。我會認真感謝給出的任何反饋。就我所知 - 我可能會使用錯誤的事件！？

我可以在SO上找到的最接近的帖子是Pagebeforeshow not fired on second time change Page event但是它並不特別處理listviews，所以我不確定它是否相關。

感謝，

馬特

的Index.html

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="jquery.custom.js" type="text/javascript"></script> 
</head> 
<body> 
    <!-- All Stock Search --> 
    <div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu"> 
     <div data-role="header" class="sixteen columns"> 
      <a href="index.html" data-icon="home" data-direction="reverse">Home</a> 
      <h1> 
       <a href="index.html" data-icon="home" data-direction="reverse"> Test </a> 
      </h1> 
     </div> 

     <div data-role="content" style="text-align:center;">  
     <ul id="ListItems" data-role="listview" data-inset="true" data-filter="true"> 
     </ul> 
     </div><!-- /content --> 
     <footer> 
      <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
       <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1"> 

       </h4> 
      </div> 
     </footer> 
    </div> 
</body>

details.html

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script src="jquery.custom.js" type="text/javascript"></script> 
</head> 
<body> 
    <!-- All Stock Search --> 
    <div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu"> 
     <div data-role="header" class="sixteen columns"> 
      <a href="index.html" data-icon="home" data-direction="reverse">Home</a> 
      <h1> 
       <a href="index.html" data-icon="home" data-direction="reverse"> Test </a> 
      </h1> 
     </div> 

     <div data-role="content" style="text-align:center;">  
     <b>Page placeholder</b> 
     </div><!-- /content --> 
     <footer> 
      <div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo"> 
       <h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1"> 

       </h4> 
      </div> 
     </footer> 
    </div> 
</body>

jquery.custom.js（JS庫）

$(document).on("pagebeforechange", function (event, data) { 
    alert('changing page...'); 
}); 
$(document).on('pageinit', function() { 
$("#detailsPage").off(); 
$("#detailsPage").on("pagebeforeshow", function(event){ 
    alert('about to show page...'); 
}); 

$("#ListItems").off(); 
$("#ListItems").on("listviewbeforefilter", function (e, data) { 
    var $ul = $(this), 
       $input = $(data.input), 
       value = $input.val(), 
       html = ""; 
    $ul.html(""); 

    if (value && value.length > 2) { 
     $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>"); 
     $ul.listview("refresh"); 

     var max = 200; 
     var limit = 0; 

     var itemslist = [ 
      {"id":1, "desc":"item1"}, 
      {"id":2, "desc":"item2"}, 
      {"id":3, "desc":"testitm1"}, 
      {"id":4, "desc":"testitm2"} 
      ]; 

     $.each(itemslist, function (i, val) { 

      if (limit < max) { 
       if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) { 
        $ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>'); 

        $('#' + val.id).off(); 
        $('#' + val.id).on('tap', function (event) { 
         var elementId = $(this).attr('id'); 

         $.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} }); 
        }); 

        limit++; 
       } 
      } 

     }); 

     $ul.listview("refresh"); 
     $ul.trigger("updatelayout"); 

    } 
}); 

});

來源

2013-05-07 Matthew.Scerri

您錯誤地綁定頁面事件。

取而代之的是：

$("#detailsPage").off(); 
$("#detailsPage").on("pagebeforeshow", function(event){ 
    alert('about to show page...'); 
});

使用此：

$(document).on("pagebeforeshow", "#detailsPage",function(event){ 
    alert('about to show page...'); 
});

記住，jQuery Mobile的頁面事件必須始終與事件代表團補充。

而且你不需要使用關閉（）與頁面事件，他們不從多個事件綁定問題的困擾。如果您有更多問題，請隨時在評論中提問。

來源

2013-05-07 16:29:58 Gajotres

優秀。馬上工作。感謝您提供的細節！ – 2013-05-08 05:47:55

pagebeforeshow事件在通話結束後沒有被激活

回答

相關問題