拥有多个具有相同名称且需要滑动打开的面板的页面

Have multiple pages with panels that have the same name and need to swipe open

本文关键字：拥有      更新时间：2023-09-26

例如，我的文档中有两个面板，面板有相同的名称，它看起来像这样:

<html>
  ...
  <body>
    <div data-role="page" id="page1">
      <div data-role="panel" id="left-panel">...</div>
      <div data-role="panel" id="right-panel">...</div>
      ...
    </div>
    <div data-role="page" id="page2">
      <div data-role="panel" id="left-panel">...</div>
      <div data-role="panel" id="right-panel">...</div>
      ...
    </div>
  </body>
</html>

我可以让滑动工作的第一页加载，但一旦我加载一个新的页面，滑动中断给我这个错误Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'。我尝试了这里概述的解决方案，但它不适合我。我使用这个代码来滑动打开面板:

 $("#page1").on("swipeleft swiperight", function(e) {
    if ($.mobile.activePage.jqmData("panel") !== "open") {
        if (e.type === "swipeleft") {
            $("#right-panel").panel("open");
        } else if (e.type === "swiperight") {
            $("#left-panel").panel("open");
        }
    }
});
$("#page2").on("swipeleft swiperight", function(e) {
    if ($.mobile.activePage.jqmData("panel") !== "open") {
        if (e.type === "swipeleft") {
            $("#right-panel").panel("open");
        } else if (e.type === "swiperight") {
            $("#left-panel").panel("open");
        }
    }
});

在$(document).on("pageinit", function(){... it's at the end of this function});内，我认为因为我将滑动侦听器绑定到每个页面，所以每个页面都具有滑动功能，但没有这样的运气。

有什么方法可以做到我正在尝试的吗?我尝试过多种解决方案，比如每次页面更改时加载滑动侦听器代码，在每个页面上使用一个类(.page)，并使用滑动侦听器代码的一个实例，但似乎没有任何作用。

所以我弄清楚了，@alkis你是部分正确的，多个id正在与jQuery移动混淆，但除了区分面板id我还不得不改变我的javascript文件的绑定到$(document).ready(function(){...});，然后包装每个滑动处理程序在自己的$("#pagenamehere").on("pageinit", function(){...});绑定。+1给你@alkis我不会弄清楚，如果你没有提到多个id，我只是想，因为它们是单独的页面，我可以使用相同的id，只有一个滑动处理程序，没有这样的运气。谢谢。

相关文章：