jquery mobile - 将内容加载到div中答案

【问题标题】：jquery mobile - loading content into a divjquery mobile - 将内容加载到div中
【发布时间】：2011-09-14 00:01:35
【问题描述】：

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

【问题讨论】：

我现在正在经历同样的问题。您是否找到了解决方案或只是关闭了 ajax 加载？
Jquery Mobile - $.mobile.changepage not loading external .JS files 的可能副本。这个答案将解释该怎么做，但是您必须删除 document.ready 事件处理程序并将脚本放在全局范围内（如果您将 JS 放在它们将可用的 DOM 元素之后，则不需要 document.ready ）。另外，请查看此文档页面顶部的大黄色部分：jquerymobile.com/demos/1.1.1/docs/api/events.html

标签： jquery ajax jquery-mobile

【解决方案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');
});

【讨论】：

实际上，在 index.html 上，我有一个指向 page2.html 的链接。只是到另一个页面的基本链接。在 page2.html 上，我有一个 js 文件，其中包含一些代码，当单击带有类 ajaxtrigger 的链接时，它使用 YQL 运行查询，然后将带有类 ajaxtrigger 的 href 标记中的 url 的结果加载到 div带有目标的 id。当我启用 jquery 移动转换时，数据不会加载到 div 中。

【解决方案2】：

我遇到了类似的问题（如上面的评论中所述），我只是想通了（至少对我而言）。当 jQuery Mobile 通过 ajax 加载下一页时，它会将前一页保留在 DOM 中，以便后退按钮可以正常工作。现在的问题是，如果您在第二页上使用 javascript 来引用任何 DOM 元素（特别是通过 ID），您必须考虑到前一页中的元素仍在 DOM 中。由于 ID 被设计为唯一的，document.getElementById() 不那么可靠，所以$("#myDiv") 也不可靠。

我刚开始做的是通过类名（例如$(".myDivClass")）引用 DOM 元素，因为 css 类被设计为不是唯一的，这似乎可以解决问题。副作用是您在 javascript 中所做的任何更改也会对所有隐藏页面进行，但它可以完成工作。我在输入此内容时想到的另一个想法是为每个 <div data-role="page"> 提供一个唯一 ID，并且从现在开始使用 $("#myUniquePage #myInnerDiv") 而不是 $("#myInnerDiv") 的查询元素。

希望对您有所帮助。

【讨论】：

嘿亚当，感谢您分享您的想法。我要试试这个。我能够让它工作，但我想在我的页面中使用更少的代码，然后我希望它也能在移动应用程序中工作，但一直遇到使用 xml 文件的问题。我会尽快报告，看看使用 class vs ids 是否是我问题的根源。 :)

【解决方案3】：

试试这个：

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

【讨论】：

【解决方案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>
}

【讨论】：