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

【问题标题】：Have multiple pages with panels that have the same name and need to swipe open有多个具有相同名称且需要滑动打开的面板的页面
【发布时间】：2013-06-11 16:52:59
【问题描述】：

例如，我的文档中有两个带有面板的页面，面板具有相同的名称，如下所示：

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

【问题讨论】：

尝试'pageinit', '[data-role=page', function()，如果它不起作用删除pageinit绑定。
尝试了你的两个建议，但都没有成功
等一下。你的html是一页吗？如果是，那么您有两次相同的 id
每一页都有面板吗？顺便说一句，我的第一条评论有误，我忘记了]。应该是[data-role=page]
你的事件处理器没问题，但是你确定这两个id不会弄乱jqm吗？

标签： javascript jquery jquery-mobile swipe

【解决方案1】：

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

【讨论】：