Question

我使用jQuery Mobile的data-role="page"创建了一个包含多个页面的HTML文档。我试图在第二页上调用面板但是收到错误

无法读取未定义
的属性'nodeType'

当我尝试转换到第二页时发生错误。我的基本页面结构如下：

<body>
    <div data-role="page" id="page1">
        <a href="#page2"> Enter Page 2</a>
    </div>
    <div data-role="page" id="page2">
        <h3> tthis is page 2 </h3>
        <input type="button" id="myButton"> My Button </input>
        <div data-role="panel" id="myPanel">
            <p> Panel content </p>
        </div>
    </div>
</body>

通过一个函数调用该面板，但是当我注释掉该函数时，我仍然收到相同的错误。

$(document).ready(function() {
    $('#myButton').on('click', function() {
        $('#myPanel').panel('open')
    })
})

面板可以工作，如果它在第一页上，如果我在第一页上定义它并在第二页打开它，它仍然在第一页打开。当我按下后退按钮时它就在那里。我正在使用jQuery Mobile，这对任何事情都有影响。

为什么我收到此错误？有没有一个简单的解决方案，还是我需要通过动态创建面板来解决这个问题？感谢。

Answer 1

首先，永远不要在jQuery Mobile中使用.ready()。

重要提示：使用$(document).bind('pageinit')，而不是$(document).ready()

你在jQuery中学到的第一件事就是在$（document）.ready（）函数中调用代码，这样一旦加载了DOM，一切都会执行。但是，在jQuery Mobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，而DOM ready处理程序仅针对第一个页面执行。要在加载和创建新页面时执行代码，您可以绑定到pageinit事件。此事件在本页底部详细说明。

来源：http://jquerymobile.com/demos/1.2.0/docs/api/events.html

其次，每个页面都应该有自己的面板，其中不同id ，包含面板的div应该是 data-role=page <的直接子项/强>

面板标记/结构：

<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">  </div>

打开面板：

静态使用锚点/按钮：

<a href="#panel_id" data-role="button" data-rel="panel">Open</a>

动态：

$.mobile.activePage.find('[data-role=panel]').panel('open'); // Or $('#panel_id').panel('open');

关闭小组：

（如果data-dismissible设置为false ）

静态使用锚点/按钮（注意：它应放在Panel div中）：

<a href="#panel_id" data-role="button" data-rel="close">Close</a>

动态：

$.mobile.activePage.find('[data-role=panel]').panel('close'); // Or $('#panel_id').panel('close');

<强> Demo

jQuery Mobile多个页面在调用面板时导致问题

1 个答案:

面板标记/结构：

打开面板：

关闭小组：