jquery mobile - 將內容加載到div中

Jquery Mobile通過「劫持」頁面並加載內容並將其注入頁面來工作。jquery mobile - 將內容加載到div中

看來，當我嘗試將其他內容注入頁面時，這會產生問題。

我有我的index.html，然後是page2.html文件。我設置了jQuery Mobile的以正常的方式包裹每一頁的內容，一個div像這樣：

<div id="container" data-role="page"> 
    // my content 
<a href="page2.html">go to page 2</a> 
</div>

當用戶點擊進入第2頁，它漂亮的幻燈片效果。位置欄中的網址如下所示：index.html＃page2.html

jquery mobile使用錨點注入頁面的內容並應用轉換。很好，所以everthing可以很好地工作到下一部分。

在page2.html，我有一個部分是加載一些外部數據並將其注入到一個div。

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a> 
<div id="target"></div> 
<script src="js/code.js"></script> 
<script src="js/loader.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.ajaxtrigger').trigger('click'); 
}); 
</script>

我遇到的問題是，當我啓用jQuery移動過渡這個腳本不起作用。它不會將數據加載到div中。無賴。

任何人都知道我需要做些什麼才能讓它觸發並將內容加載到該div中？

來源

2011-06-13 Robbiegod

我現在正在經歷同樣的問題。你找到解決方案或只關閉Ajax負載？ – Adam 2011-07-29 18:57:25

[Jquery Mobile - $ .mobile.changepage不能加載外部.JS文件]的可能重複（http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files ＃回答-7449731）。這個答案將解釋要做什麼，但是你必須移除'document.ready'事件處理程序，並將腳本放置在全局範圍內（如果將JS放在DOM元素後面，則可以使用'document'。準備好'不需要）。另外，請查看此文檔頁面頂部的大黃色部分：http://jquerymobile.com/demos/1.1.1/docs/api/events.html – Jasper 2012-07-26 23:30:45

您是否嘗試使用$(document).ready(function(){ $('.ajaxtrigger').trigger('click'); });來捕獲index.html中的點擊/點擊到page2，然後將數據插入page2.html？

如果是這樣，那將無法正常工作，因爲您不能以這種方式在頁面之間傳遞數據。嘗試給page2.html的主要股利#page2 ID和使用pagebeforeshow方法（http://jquerymobile.com/test/#/test/docs/api/events.html）

$('div#page2').live('pagebeforeshow',function(event, ui){ 
    $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php'); 
});

來源

2011-06-13 15:41:01 daybreaker

實際上，在index.html上我有一個鏈接page2.html。只是到另一頁的基本鏈接。在page2.html中，我有一個js文件，其中有一些代碼，當它與類ajaxtrigger的鏈接是單擊時，它使用YQL運行查詢，然後將ajaxtrigger類的href標記中的url結果加載到div中與目標的id。當我啓用jquery移動轉換時，數據不會加載到div中。 – Robbiegod 2011-06-13 16:31:31

我有一個類似的問題（如上面評論中提到的），我只是想出了它（至少對我而言）。當jQuery Mobile通過ajax加載下一頁時，它會將前一頁保存在DOM中，以便後退按鈕可以正常工作。現在的問題是，如果您在第二頁上使用JavaScript來引用任何DOM元素（尤其是通過ID），則必須考慮到前一頁中的元素仍在DOM中。由於ID的設計是唯一的，因此document.getElementById()不可靠，所以$("#myDiv")也不是。

我剛開始做的是通過引用類名的DOM元素（例如$(".myDivClass")），因爲CSS類設計不會是唯一的，似乎這樣的伎倆。副作用是，無論您在JavaScript中做出什麼樣的更改，都會對所有隱藏的頁面進行更改，但它可以完成工作。當我打字時想到的另一個想法是給每個<div data-role="page">一個唯一的ID，並且從現在起使用$("#myUniquePage #myInnerDiv")而不是$("#myInnerDiv")查詢元素。

希望有幫助。

來源

2011-07-29 20:50:08 Adam

嘿亞當，謝謝你分享你的想法。我會試試這個。我能夠得到它的工作，但我想在我的網頁中使用較少的代碼，然後我會喜歡這也適用於移動應用程序，但仍然遇到消耗XML文件的問題。我會盡快報告，看看使用class vs id是否是我的問題的根源。 :) – Robbiegod 2011-08-01 20:28:18

試試這個：

$('page2.html').bind('pageshow', function() { 
    $('.ajaxtrigger').trigger('click'); 
});

來源

2011-08-04 10:59:58 ZOid

試過了，它沒有改變任何東西... – Robbiegod 2011-08-05 16:53:32

另一種選擇是，以生成要處理的每個頁面加載的DOM元素的唯一的ID，這樣你就不會有重複的ID問題，亞當描述。我已經在C＃（w/Razor語法）中這樣做了，如下所示：

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); } 
@section header 
{ 
    <div id="@headerAutoGenSym"></div> 

    <script type="text/javascript"> 
     $(function() { 
      $(document).bind("pageinit", function() { 
       $.get(
        '@Url.Action("myAjaxURL")', 
        function (data) { 
         $('#@headerAutoGenSym').append(data); 
        } 
       ); 
      }); 
     }); 
    </script> 
}

來源

2012-03-23 15:29:57

jquery mobile - 將內容加載到div中

回答

相關問題