介紹

我試圖模仿服務器端包含類似的過程，但在客戶端來代替。我有一個標題和麪板導航，我將在我的Web應用程序的每個頁面上重複使用，並且我想集中它以便於更高效地進行維護。jQuery Mobile的 - 加強和綁定到AJAX加載HTML

我的問題是何時是頁面加載事件過程中調用我的HTML「包含」的最佳時間，以便它仍然可以得到增強，並且可以將點擊/點擊事件綁定到將打開導航的圖像面板？

代碼

HTML - 公司簡介頁面（注：在使用單頁模板;冷落爲了簡單起見，<head>代碼）

<div data-role="page" id="aboutUs" title="About Us"> 

     <div data-role="content"> 

      <p>My unique to the page content here</p> 

     </div><!-- /content --> 

    </div> 
    <!-- /page About Us -->

HTML - 包括內容

 <div id="headerContainer" data-role="header"> 
      <div class="companyLogoHeader"><img class="imgCompanyLogo" src="imgHeaderLogo.jpg" width="847" height="27" /></div>    
      <img id="imgPanelNavButton" src="icon-panel-bars.png" /> 
      <h2></h2> 
     </div><!-- /header --> 


     <div data-role="panel" data-position="left" data-display="reveal" id="nav-panel" data-theme="a"> 

       <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search"> 
        <li data-icon="false" data-theme="g"> 
         <a href="#" data-rel="back" data-direction="reverse"><img src="icon-panel-arrow-left.png" class="ui-li-icon ui-corner-none" /> Back</a> 
         <a href="#" data-rel="close" data-icon="delete" data-iconpos="notext" data-theme="h" style="margin-top:-1px;">Close Menu</a> 
        </li> 
        <li><a href="index.html"><img src="icon-panel-home.png" class="ui-li-icon ui-corner-none" /> Home</a></li> 
        <li><a href="scheduling.html"><img src="icon-panel-calendar.png" class="ui-li-icon ui-corner-none" /> Schedule</a></li> 
        <li><a href="services/services.html"><img src="icon-panel-list-bullets.png" class="ui-li-icon ui-corner-none" /> Services</a></li> 
        <li><a href="contact.html"><img src="icon-panel-phone.png" class="ui-li-icon ui-corner-none" /> Contact Us</a></li> 
       </ul> 

     </div>

的JavaScript：（我的理解是強調過程只是pagecreate事件發生後

$(document).on('pagebeforecreate', '#aboutUs', function() 
{ 

$.ajax({ 
    url: 'assets/includes/SSI-Header-NavPanel.html', 
    success: function(html) { 
     $('[data-role="content"]').before(html); //Put the "include" code before the content container 
     $('[data-role="header"]').find('h2').text($('[data-role="page"]').attr('title')).trigger('create'); // Once the "include" code is in the DOM, get the page title and insert it in the 'H2' tag for a page heading, then trigger a create for enhancement 
     $('[data-role="page"]').trigger('create'); // adding this seem to help with the enhancements but didn't do the full job. Don't even know if this is right? 
     $('#imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap. 
      $('#nav-panel').panel('open'); 
     }); 

    } 
}); 


});

一些意見：

的data-role="header"不似乎得到了一個ny的增強類，以及額外的data-屬性，我的網站上的其他頁面正在獲取我還沒有實現此方法的地方
當我刷新關於我們頁面時，頁面似乎加載一些，增強功能，但然後我嘗試點擊主頁上的鏈接沒有增強。對於這個頁面，我想要從主頁上做一個data-prefetch以及其他原因。
最後，如果我導航離開該頁面的內容已被列入後，再回過頭來，我得到了「包括」內容的雙插入。對於這個應該包裝AJAX請求和IF語句檢查的內容？或者更聰明的話呢？

請幫助，並感謝您抽出寶貴時間。

來源

2013-08-05 WizzyBoom

[請查看這個優秀的帖子由gajotres了]（http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content） – Ross

這給（單獨從上面的代碼）一試 -

$('#aboutUs').one('pagebeforeshow', function(){ 
    $(this).trigger('pagecreate'); 
});

要回答你的最後一個問題，關於追加只有Ajax響應一次，就可以使用jQuery's one方法這一點。像下面 -

$('#aboutUs').one('pagebeforecreate', function() { 
    $.ajax({ 
     url: 'assets/includes/SSI-Header-NavPanel.html', 
     success: function(html) { 
      $('#aboutUs [data-role="content"]').before(html); //Put the "include" code before the content container 
      $('#aboutUs [data-role="header"] h2').text($('#aboutUs [data-role="page"]').attr('title')); 
      $('#aboutUs #imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap. 
       $('#aboutUs #nav-panel').panel('open'); 
      }); 

     } 
    }); 
});

另外，代替$(document).on('pagebeforecreate', '#aboutUs', function()你可以簡單地做$('#aboutUs').on('pagebeforecreate', function()

Here is a jsFiddle Demo that appends dynamic content to a page once and then triggers the pagecreate in the pagebeforeshow event

/更新

當您使用$('[data-role="content"]')，$('[data-role="header"]')和$('[data-role="page"]')爲您的選擇時，附加內容您將追加到jQM索引頁面中每個內容，標題和頁面的第一個實例。要解決這一點，你需要你的選擇細化到$('#abousUs [data-role="content"]')，$('#aboutUs [data-role="header"]')，並$('#aboutUs [data-role="page"]')

就個人而言，我會做內部的單一pagebeforeshow因爲pagebeforechange每個過渡觸發兩次你的Ajax。下面是我會怎麼做這一點 - 我使用jQuery one這個pagebeforeshow

$('#aboutUs').one('pagebeforeshow', function() { 
    $.ajax({ 
     url: 'assets/includes/SSI-Header-NavPanel.html', 
     success: function(html) { 
      $('#aboutUs [data-role="content"]').before(html); //Put the "include" code before the content container 
      $('#aboutUs [data-role="header"] h2').text($('#aboutUs [data-role="page"]').attr('title')); 
      $('#aboutUs #imgPanelNavButton').on('click', function() { // now that the icon-panel-bars.png image is loaded into the DOM, bind a click event to it so it can open the panel on tap. 
       $('#aboutUs #nav-panel').panel('open'); 
      }); 
      $('#aboutUs').trigger('pagecreate'); 
     } 
    }); 
});

通知。您還可以爲aboutUs頁面增加pagebeforeshow。

來源

2013-08-05 20:06:03 Ross

我搬到了另一部分我正在寫的應用程序，而我等待對此作出迴應。謝謝。我剛剛完成並且會在第二天或第二天繞回來。謝謝，我會讓你知道！ – WizzyBoom

jQuery Mobile的 - 加強和綁定到AJAX加載HTML

介紹

代碼

一些意見：

回答

相關問題