2012-03-02 83 views
4

我看來,像這應該工作(基於答案在這裏SM其它問題),但我沒有得到任何結果...不明白爲什麼這個JavaScript不會JQM工作

這裏是我的

第二個編輯:在頁面的起始碼

<script type="text/javascript"> 

     function capitalizeFirstLetter(string){ 
      return string.charAt(0).toUpperCase() + string.slice(1); 
     } 


     $(document).delegate('#sun, #mon, #tue, #wed, #thu, #fri, #sat', 'pageshow' , function() { 
      var days = ['sun','mon','tue','wed','thu','fri','sat'], 
       output = [],//create an output buffering variable 
       d = new Date(); 
      for(var x=0; x<days.length; x++){ 
       //rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array 
       output.push('<li><a href="#' + days[x] + '">' + capitalizeFirstLetter(days[x]) + '</a></li>'); 
      } 

      //now we add the buffered data to the listview and either refresh or initialize the widget 
      var $cNav = $('#custom-navbar') 
      $cNav.append(output.join('')); 

      //if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized 
      if ($cNav.hasClass('ui-navbar')) { 
       $cNav.navbar('refresh'); 
      } else { 
       $cNav.navbar(); 
      } 
     }); 

    </script> 

這是我的體內代碼:

<div data-role="content"> 
<div data-role="navbar" style="margin: -10px 0 15px 0;"> 
    <ul id="custom-navbar"></ul> 
</div> 
+0

修訂:'.live()'的工作,但'.listview()'沒有,所以我原來意見仍持有:如果人們遵循[教程](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery),他們會注意到:*「幾乎當我們使用jQuery讀取或操作文檔對象模型(DOM)時,我們需要確保我們開始添加事件等,只要DOM準備就緒,爲此,我們爲文檔註冊一個準備好的事件。「*(舉例)。 – 2012-03-02 12:21:24

+0

@FelixKling我會想象''.listview()'是jquery-mobile庫的一部分......它在'

0

我想'pageshow'事件是jquery移動框架。如果是的話,那麼你應該在你的腳本之前添加jquery手機腳本標籤。

+0

這應該不重要。你甚至可以用jQuery定義自己的事件,他們不必「存在」。例如。我可以說'$('#foo')。bind('bar',....)'。 'bar'不是一個定義的事件。儘管如此,只要我調用'$('#foo')。trigger('bar')',就會執行事件處理程序。 – 2012-03-02 12:23:33

1

那麼,從jQuery Mobile網站他們直接推薦而不是綁定到$(document).ready(),因爲他們在幕後使用了一些ajax魔法,而是建議執行類似於您正在做的事情但用pageinit而不是pageshow。從我在文檔中可以看到他們應該(在此)功能上相同。加載jqm後你嘗試綁定pageshow或pageinit

http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

重要須知:pageInit(),而不是$(文件)。就緒()

你的jQuery學習的第一件事就是打電話給 的$(document)內部代碼。 ready()函數,因此一旦加載了DOM,就會立即執行所有操作。但是,在jQuery Mobile中,Ajax用於在導航時將每個頁面的 內容加載到DOM中,DOM準備好的 處理程序僅對第一頁執行。要在加載和創建新頁面時執行代碼,可以綁定到pageinit事件。 此事件在本頁底部詳細解釋。

0

那麼首先使用

$('ul#custom-navbar').listview();

$('ul#custom-navbar').listview('refresh');這不會工作,如果元素沒有初始化


但是如果在ul上添加了html attr data-role =「listview」,則頁面顯示jQM將自動初始化列表查看,如果是這樣,然後你添加了元素,那麼你需要運行$('ul#custom-navbar').listview('refresh');我建議你這樣做。


此外你需要把你的$('ul#custom-navbar').listview();像其他人提到的,當你把它JQM沒有加載有人肝功能中,你應該使用pageinit事件,pageshow也時觸發你回到頁面(通過後退按鈕等),你不想初始化它兩次。閱讀這兩篇文章,最好你會用這兩個來清理處理JS。

PS:我很高興你正確地收聽pageinit/pageshow事件,而不是使用document.ready,我還建議在mobileinit處理程序中啓動這些監聽器。 $(document).bind("mobileinit", function(){//your pageinit/pageshow listeners here,也是.live功能現在已經廢棄,用$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){

相關問題