jquery 移動 - 將內容加載到 div

Question

Jquery Mobile 通過“劫持”頁面並加載內容並將其注入頁面來工作。

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

我有我的 index.html 和 page2.html 文件。 我正在以正常方式設置 jquery 移動設備，將每個頁面的內容包裝在一個 div 中，如下所示：

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

當用戶點擊 go 到第 2 頁時，它會產生漂亮的幻燈片效果。 地址欄中的 url 如下所示： index.html#page2.html

jquery 移動使用錨點注入頁面內容並應用過渡。 很好，所以一切都很好，直到下一部分。

在 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 中？

Answer 1

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

如果是這樣，那將不起作用，因為您不能以這種方式在頁面之間傳遞數據。 嘗試為 page2.html 的主 div 賦予#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');
});

Answer 2

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

我剛開始做的是通過 class 名稱（例如$(".myDivClass") ）引用 DOM 元素，因為 css 類被設計為不是唯一的，這似乎可以解決問題。 副作用是，您在 javascript 中所做的任何更改也將對所有隱藏頁面進行，但它可以完成工作。 在我輸入此內容時想到的另一個想法是給每個<div data-role="page">一個唯一的 ID，從現在開始使用$("#myUniquePage #myInnerDiv")而不是$("#myInnerDiv") 。

希望這會有所幫助。

Answer 3

嘗試這個：

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

Answer 4

另一種選擇是為您想要在每次頁面加載時操作的 DOM 元素生成一個唯一 id，這樣您就不會遇到 Adam 描述的重復 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>
}