有多个具有相同名称且需要滑动打开的面板的页面
Posted
技术标签:
【中文标题】有多个具有相同名称且需要滑动打开的面板的页面【英文标题】：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吗？
【参考方案1】：
所以我想通了，@alkis 你部分正确，多个 id 与 jQuery Mobile 混淆了，但除了区分面板 id 之外，我还必须将我的 javascript 文件绑定更改为 $(document).ready(function()...); 然后换行每个滑动处理程序都有自己的$("#pagenamehere").on("pageinit", function()...); 绑定。 +1 给你@alkis，如果你没有提到多个 id，我就不会明白，我只是想，因为它们是单独的页面，我可以使用相同的 id 并且只有一个滑动处理程序，没有这样的运气。谢谢。
【讨论】：
以上是关于有多个具有相同名称且需要滑动打开的面板的页面的主要内容，如果未能解决你的问题，请参考以下文章