jquery mobile - 将内容加载到 div 中

Question

Jquery Mobile 的工作原理是“劫持”页面并加载内容并将其注入到页面中。

当我尝试将其他内容注入页面时，这似乎会产生问题。

我有我的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 页时，会产生漂亮的幻灯片效果。地址栏中的 url 如下所示：index.html#page2.html

jquery mobile 使用锚点注入页面内容并应用过渡。很好，所以在下一部分之前一切都很顺利。

在 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 mobile 中启用转换时，此脚本不起作用。它不会将数据加载到 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")

也不可靠。

我刚刚开始做的是通过类名引用 DOM 元素（例如

$(".myDivClass")

），因为 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#（使用 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>
}