只在第一視圖（第一頁）上運行的Javascript - jQuery Mobile

從螢火蟲可能的相關錯誤：...在初始化之前無法在列表視圖上調用方法;試圖調用方法'選項'只在第一視圖（第一頁）上運行的Javascript - jQuery Mobile

我正在做這個程序，需要你輸入一個'水平'的答案去下一個。答案在列表中，只應顯示在搜索的完全匹配。下面是我的前兩頁的HTML和我的JavaScript隱藏答案，直到提供完全匹配。

然而，它只適用於第一個視圖（頁面），不適用於第二，第三，第四等！我真的花了很長時間試圖解決這個問題，我迷路了。到目前爲止，唯一對我有用的是prefetch-data =「true」，但它只在某種程度上起作用，並在第3頁後停止工作。其他則是我試圖實現許多解決方案，但我在這裏和那裏找到了，但沒有人做我想要的。我希望我做錯了一些簡單的事情。

爲什麼腳本只能在第一個視圖上運行，我該如何解決？

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
     <title>PARestaurant</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
      <link rel="stylesheet" href="css/main.css"> 
      <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> 
      <link rel="style" href="images"> 
      <style type="text/css"></style> 
      <script src="js/initOptions.js"></script> 
      <script src="js/messages.js"></script>  
      <script src="js/main.js"></script> 
    </head> 

    <body> 

<!-- Page Index 
Home Page 
Level Two 
Level Three 
Level Four 
--> 

<!-- -----------------------------------------------------------Home Page----------------------------------------------------------- --> 
     <div data-role="page" id="232114125125124124" data-theme="b"> 
     <div data-role="header" data-theme="a" align="center"> 
     <h1>Star Riddle</h1> 
     </div> 

     <div data-role="content" align="center"> 
      <div data-role="collapsible"> 
       <h2>Ready when you are!</h2> 
       <div> 
        <ul class="whatever" data-role="listview" data-filter="true" 
         data-filter-reveal="true" data-inset="true" 
         data-filter-placeholder=""> 
         <li data-filtertext="Green"><a href="#32432532462362345325235235">You are a genius!</a></li> 
        </ul> 
       </div> 
      </div> 
      <div id="blue"></div> <h2>+</h2> <div id="yellow"></div> 
     </div> 
     <div data-role="footer" align="center"> 
      <h1>Level 1</h1> 
     </div> 
     </div> 

<!-- -----------------------------------------------------------Level Two----------------------------------------------------------- --> 
     <div data-role="page" id="32432532462362345325235235" data-theme="b"> 
     <div data-role="header" data-theme="a" align="center"> 
     <h1>Star Riddle</h1> 
     </div> 
     <div data-role="content" align="center"> 
       <div data-role="collapsible"> 
       <h2> You know what to do! </h2> 
        <div> 
         <ul class="whatever" data-role="listview" data-filter="true" data-filter-reveal="true" data-inset="true" data-filter-placeholder=""> 
          <li data-filtertext="Level 1"><a href="#232114125125124124">Click me to go back!</a></li> 
          <li data-filtertext="Level 3"><a href="#534264363464327327">Up you go!</a></li> 
          <li data-filtertext="Level 4">You have to struggle a bit</li> 
          <li data-filtertext="Level 5">Not so fast</li> 
          <li data-filtertext="Level 6">No No NO!</li> 
          <li data-filtertext="Level 7">Stop it...</li> 
         </ul> 
        </div>`enter code here` 
        <div><p>Where do you wanna go?<p></div> 
       </div> 
     </div> 
     <div data-role="footer" align="center"> 
      <h1>Level 2</h1> 
     </div> 
     </div>

JAVASCRIPT低於

exactMatch = function(text, searchString) { 
    return !(text.toLowerCase() == searchString); 
    }; 
$(function() { 
    $(".whatever").listview('option', 'filterCallback', exactMatch); 
}); 

}

來源

2015-02-09 Psyduck

而不是$（function（）{}爲每個頁面（http://api.jquerymobile.com/1.3/pageinit/）使用pageinit，因爲直到您第一次訪問每個頁面時，列表視圖纔會初始化。 – ezanker 2015-02-09 21:52:22

你的回覆，但我有點新，並不知道如何正確實施這個？我應該只是添加一些東西到我的腳本或每個頁面？ – Psyduck 2015-02-10 08:47:39

而不是

$(function() {...

嘗試是這樣的：

$(document).on("pageinit", function(e) {  
    $(e.target).find(".whatever").listview('option', 'filterCallback', exactMatch); 
});

pageinit運行一次，因爲每次訪問的第一個初始化頁面時間。

來源

2015-02-10 15:00:30 ezanker

我問了很多不同的人，包括一些「專家」並嘗試了很多不同的東西，你只是修復它。似乎非常有用的運行JavaScript多頁文檔上的特定重複元素！ – Psyduck 2015-02-10 16:32:37

只在第一視圖（第一頁）上運行的Javascript - jQuery Mobile

回答

相關問題