Jquery Mobile 读取动态列表中的文档

Posted 2023-05-09

【中文标题】Jquery Mobile 读取动态列表中的文档

【英文标题】：Jquery Mobile read document in dynamic list

【发布时间】：2017-10-11 17:38:46

【问题描述】：

我正在使用 JqueryMobile 开发 Phonegap 应用程序。我想创建一个显示每个元素的动态列表

我有 3 个 html 文件和 1 个 php 文件：index.html > list.html > details.html JS 在 html 文件中。

我使用 jquery-1.6.4.min.js & jquery.mobile-1.4.5.min.js

index.html:

 ...
    HTML
    ...
    <script>
    $(document).ready(function()
     $("#button").click(function()
      $.post("myURL", myparameters, function(data) 
       var obj = jQuery.parseJSON(data);
       for (i = 0; i < obj.length; i++)
         var lista = $("\
         <td style='width:100px;height:100px' >\
          <a href='details.html' id='details' class='details' value='"+obj[i]["id"]+"'>\
           <img style='width:100px;height:100px' src='"+image+"'>\
          </a>\
         </td>");

        list.appendTo("#...");
        
       );
      );
     );
    </script

>

list.html:

...
HTML
...

<script>

$(document).ready(function()
 $(".details").click(function()
   $.post("myURL", myparameters, function(data) 
   
  *Here I load details data*
   );

 );
);
</script>

问题/疑问：

$(document).ready(function)...;仅加载一次动态列表。当我转到其他菜单时，list.html 中的数据消失。

当我点击 list.html 中的某个元素时，jquery 代码不会在 details.html 中加载数据

JQ 1.6.4 和 JQM 1.4.5 还好吗？

我知道我在阅读文档时做错了。我阅读了 JqueryMobile 文档并尝试了其他方法，例如：

$(document).on('pagecreate',function()...

$(document).on('pagebeforecreate',function()...

$(document).on('pageinit',function()...

但没用，所以帮我 JQ 和 JQM D 硕士：

【参考方案1】：

$(document).ready(function)...;只加载一次动态列表。当我 转到其他菜单，list.html 中的数据消失。当我点击一些 list.html 中的元素，jquery 代码不加载 details.html 中的数据

您将所有页面作为 div 插入，并在它们之间进行转换。 这是 jquery 官方文档中关于如何创建“多个 div”并在它们之间切换的示例代码

主体由几个 div 元素组成，这些元素使用 页面小部件。每个这样的页面都有一个 id 属性来区分它 其他页面。

页面可以使用锚点相互链接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>
<div data-role="page" id="page2">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

由于您使用的是jquery mobile 1.4.5，您可以使用this boilerplate code快速上手

JQ 1.6.4 和 JQM 1.4.5 还好吗？

According to official site，这些是支持 jQuery 1.8 - 1.11 / 2.1 的 jquery 版本。

【讨论】：

首先，感谢 Santosh 的回答。我在 Jquery 上开发不到 6 个月，所以我试图理解所有内容，但我犯了一些错误。然后该代码是一个包含多个文件的文件页？我想要包含 1 页或更多页的多个文件

如果我在它们之间进行转换，我需要其他在 pagechange 时执行 Jquery 的代码。我也尝试了“pagechange”。我仍在努力

@JaimeGarcia 是的，你可以有多个页面，但是你必须在每个 html 中包含 jquery 文件和资产。