Question

例如，我的doc中有两个面板，面板名称相同，看起来像这样：

<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'。我尝试了HERE概述的解决方案，但它对我不起作用。我正在使用此代码刷开面板：

 $("#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）并使用滑动侦听器代码的一个实例，但似乎没有任何效果。

Answer 1

所以我想通了，@ uris你是部分正确的，多个ID正在搞乱jQuery Mobile，但除了区分面板ID之外，我还必须将我的javascript文件的绑定更改为$(document).ready(function(){...});和然后将每个滑动处理程序包装在自己的$("#pagenamehere").on("pageinit", function(){...});绑定中。 +1给你@alkis如果你没有提到多个id，我不会想到它，我只是想，因为它们是单独的页面，我可以使用相同的ID，只有一个滑动处理程序，没有这样的运气。感谢。

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

1 个答案: