jquery mobile - 将内容加载到div中

Posted

技术标签:

【中文标题】jquery mobile - 将内容加载到div中【英文标题】:jquery mobile - loading content into a 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 【参考方案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 中所做的任何更改也会对所有隐藏页面进行,但它可以完成工作。我在输入此内容时想到的另一个想法是为每个 &lt;div data-role="page"&gt; 提供一个唯一 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>

【讨论】:

以上是关于jquery mobile - 将内容加载到div中的主要内容,如果未能解决你的问题,请参考以下文章

将 HTML 动态附加到 Div 后,Jquery Mobile Slider 不滑动

如何在 jquery(移动)中刷新 DIV?

每10秒自动加载和刷新div jquery mobile

使用jquery从按钮将内容加载到容器div中

jQuery Mobile:在完全加载时修改 DOM 以使页面高度为 100%

如何使用 JQuery onclick 将 MySql 中的随机内容加载到 div 中? [复制]