無法在jQuery Mobile應用程序中隱藏/顯示元素

我在jQuery Mobile中有一個應用程序。每次顯示頁面時，必須執行一些JavaScript來隱藏/顯示某些元素（取決於會話狀態）。無法在jQuery Mobile應用程序中隱藏/顯示元素

我在這方面花了很多時間，無法弄清楚爲什麼JavaScript沒有按預期隱藏元素，有時候這樣做，有時候不是。這似乎有點隨意。事實上DOM似乎一致。應該隱藏的元素有display: none，可見的元素有display: block，但它與瀏覽器中可以看到的不匹配。

我設法將問題簡化爲一個非常簡單的案例。這是非常基本的樣板模板，我添加的JavaScript：

page1.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <script src="test.js"></script> 
    </head> 
<body> 

<div data-role="page" id="page1"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
     <div id="el1">ELEMENT 1</div> 
     <div id="el2">ELEMENT 2</div> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p>  
     <a href="page2.html">PAGE 2</a> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

</body> 
</html>

page2.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
     <script src="test.js"></script> 
    </head> 
<body> 

<div data-role="page" id="page2"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
     <div id="el1">ELEMENT 1</div> 
     <div id="el2">ELEMENT 2</div> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p> 
     <a href="page1.html">PAGE 1</a> 
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 

</body> 
</html>

test.js

$(document).bind("pagechange", function(event, data) { 
    console.info('Changed to page: ' + data.toPage.attr('id')); 
    $('#el1').hide(); 
    $('#el2').show(); 
});

您可以通過將這三個文件放在本地服務器上進行測試。 page1.html和page2.html幾乎是相同的頁面（僅用於測試），而test.js只是隱藏#el1並顯示#el2。這個JavaScript總是在頁面改變的時候成功執行（控制檯語句總是顯示出來），但是#el1有時隱藏，有時不能隱藏，總是隱藏。

再一次，最讓我感到困惑的是，如果我直接查看DOM（在Chrome控制檯中），那麼一切看起來都是正確的。 CSS顯然是display: none，但元素仍然可見。

任何想法可能會導致此問題？

來源

2012-11-04 this.lau_

你可能會嘗試幾件事情。

使用on而不是bind。也許你對文檔有約束力，文檔正在改變，失去了約束。使用on應該能夠擺脫這一點。
在頁面上使用on直接：

$（ '＃第1頁'）上（ 'pagechange'，函數（）{}）;

來源

2012-11-04 13:59:57 rmarimon

無法在jQuery Mobile應用程序中隱藏/顯示元素

回答

相關問題