JQuery Mobile Linked Listview 无法正常工作？

Posted 2023-05-09

【中文标题】JQuery Mobile Linked Listview 无法正常工作？

【英文标题】：JQuery Mobile Linked Listview not working properly?

【发布时间】：2018-04-22 15:24:58

【问题描述】：

所以，我正在使用 JQuery Mobile 制作移动电子商务应用程序，但遇到了以下问题。

登录后，应用程序会将用户带到商店区域，该商店区域包含一个填充有 JSON 数据的链接列表视图。现在，当商店页面第一次初始化时，链接不起作用，但是当我刷新页面时，它们工作得很好。有谁知道我为什么会出现这种行为？

注意：我使用的是多页模板，从#store 页面导航到#product 页面。

这里是我为此使用的 javascript：

$(document).on("pagebeforecreate","#store", function() 
    getProducts('',
      function(data)
          let products = data.products;
          storeProducts(products);
          $(".product-list").html('');
          $.each(products, function(i, item)
            $(".product-list").append(`
              <li>
                <a href="#product" data-index="$item.prod_id">
                  <img src="$item.picture" >
                  <h2>$item.prod_name</h2>
                  <p>$item.prod_desc</p>
                  <small>Price: <strong>€$item.unit_price</strong></small>
                </a>
              </li>
              `).listview("refresh");
          );

        ,
        function(e)
          console.log(e);
        ,
        function(data)
          console.log('always');
      );
);

function getProducts(param, success, error, always)
  $.ajax(
    type:'GET',
    url:`./ajax/products-ajax.php?$param`,
    dataType: 'json',
    async:true
  ).done(function(data)
    success(data);
  ).fail(function(e)
    error(e);
  ).always(function(data)
    always('always');
  );

提前致谢。

更新：

你好解封器， 再次感谢您的回答。控制台日志中没有显示任何错误。我尝试关闭浏览器中的缓存，但仍然有同样的问题。让我看看我是否可以更好地解释我正在尝试做的事情。

我正在尝试使用 JQuery Mobile 作为前端和 PHP 作为后端来制作这个应用程序。我有一个带有链接的 index.php，可以让您登录或注册。假设您选择登录选项，这将带您进入 login.php，其中有一个表单，当您提交它时，它会向服务器发出 ajax 请求以进行身份​​验证。假设响应成功，这会将您重定向到 listview 所在的 store.php。正如我之前所说，当您在登录后进入 store.php 时，列表视图中的链接不起作用，但是如果您刷新页面，则按预期工作。

【问题讨论】：

认为这就是正在发生的事情。登录后，我使用 $.mobile.changePage("store.php") 以编程方式将用户重定向到 store.php。但是，当我这样做时，Jquery mobile 会将此页面加载到 DOM 中已经存在的页面之上（Ajax 导航）。这在我的情况下是不需要的，因为我在此页面中有一些 PHP 脚本用于身份验证。我尝试使用 $.mobile.ajaxEnabled=false;防止 ajax 这样做，但仍然这样做。

【参考方案1】：

这是导致问题的原因：

在身份验证后将用户重定向到 store.php 时，JQuery Mobile 的 Ajax 导航会抓取我在其中的第一页（store.php 是多页的，包含#store 和 #product）并将其注入到已经存在的页面之上在 DOM 中。当然，当我单击链接时，这些链接不起作用，因为 DOM 中没有 id = "product" 的页面容器。当我刷新页面时，JQuery mobile 向服务器发出了一个 http 请求，这次获取了包含 #store 和 #product 页面的完整 store.php，因此链接将按预期工作。

我的解决方案：将#store 和#product 作为外部页面。通过将它们分开并将它们称为外部页面，我避免了 Ajax 导航的这个问题。