jquery mobile - 将内容加载到div中

Jquery Mobile通过“劫持”页面并加载内容并将其注入页面来工作。jquery mobile - 将内容加载到div中

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

我有我的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页，它漂亮的幻灯片效果。位置栏中的网址如下所示：index.html＃page2.html

jquery mobile使用锚点注入页面的内容并应用转换。很好，所以everthing可以很好地工作到下一部分。

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

来源

2011-06-13 Robbiegod

我现在正在经历同样的问题。你找到解决方案或只关闭Ajax负载？ – Adam 2011-07-29 18:57:25

[Jquery Mobile - $ .mobile.changepage不能加载外部.JS文件]的可能重复（http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files ＃回答-7449731）。这个答案将解释要做什么，但是你必须移除'document.ready'事件处理程序，并将脚本放置在全局范围内（如果将JS放在DOM元素后面，则可以使用'document'。准备好'不需要）。另外，请查看此文档页面顶部的大黄色部分：http://jquerymobile.com/demos/1.1.1/docs/api/events.html – Jasper 2012-07-26 23:30:45

您是否尝试使用$(document).ready(function(){ $('.ajaxtrigger').trigger('click'); });来捕获index.html中的点击/点击到page2，然后将数据插入page2.html？

如果是这样，那将无法正常工作，因为您不能以这种方式在页面之间传递数据。尝试给page2.html的主要股利#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'); 
});

来源

2011-06-13 15:41:01 daybreaker

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

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

我刚开始做的是通过引用类名的DOM元素（例如$(".myDivClass")），因为CSS类设计不会是唯一的，似乎这样的伎俩。副作用是，无论您在JavaScript中做出什么样的更改，都会对所有隐藏的页面进行更改，但它可以完成工作。当我打字时想到的另一个想法是给每个<div data-role="page">一个唯一的ID，并且从现在起使用$("#myUniquePage #myInnerDiv")而不是$("#myInnerDiv")查询元素。

希望有帮助。

来源

2011-07-29 20:50:08 Adam

嘿亚当，谢谢你分享你的想法。我会试试这个。我能够得到它的工作，但我想在我的网页中使用较少的代码，然后我会喜欢这也适用于移动应用程序，但仍然遇到消耗XML文件的问题。我会尽快报告，看看使用class vs id是否是我的问题的根源。 :) – Robbiegod 2011-08-01 20:28:18

试试这个：

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

来源

2011-08-04 10:59:58 ZOid

试过了，它没有改变任何东西... – Robbiegod 2011-08-05 16:53:32

另一种选择是，以生成要处理的每个页面加载的DOM元素的唯一的ID，这样你就不会有重复的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> 
}

来源

2012-03-23 15:29:57

jquery mobile - 将内容加载到div中

回答

相关问题