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 中所做的任何更改也会对所有隐藏页面进行,但它可以完成工作。我在输入此内容时想到的另一个想法是为每个 <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>
【讨论】:
以上是关于jquery mobile - 将内容加载到div中的主要内容,如果未能解决你的问题,请参考以下文章
将 HTML 动态附加到 Div 后,Jquery Mobile Slider 不滑动