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

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

javascript jquery html jquery-mobile

Javascript jQuery Mobile多个页面在调用面板时导致问题,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我有一个使用jQuery Mobile的data role=“page”的多页HTML文档。我试图呼叫第二页的面板，但收到错误无法读取未定义的属性“nodeType” 当我尝试转换到第二页时，会发生错误。我的基本页面结构如下： <body> <div data-role="page" id="page1"> <a href="#page2"> Enter Page 2</a> </div> &l

我有一个使用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>

如果面板位于第一页，并且如果我在第一页定义它并在第二页打开它，那么它仍然在第一页打开。当我按下后退按钮时，它就在那里。我也在使用jquerymobile，这对任何事情都有影响

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

首先，不要在jQuery Mobile中使用

.ready（）

重要提示：使用

$（文档）.bind（'pageinit'）

，而不是

$（文档）.ready（）

在jQuery中学习的第一件事是调用$（document）.ready（）函数中的代码，以便在加载DOM后立即执行所有操作。但是，在jquerymobile中，Ajax用于在导航时将每个页面的内容加载到DOM中，而DOM就绪处理程序只对第一个页面执行。要在加载和创建新页面时执行代码，可以绑定到pageinit事件。本页底部详细解释了此事件

资料来源：

其次，每个页面都应该有自己的面板，面板id不同，包含面板的div应该是

数据角色=page

的直接子级

面板标记/结构：关闭面板：（如果

数据可驳回

设置为

假

）

使用锚定/按钮进行静态操作（注意：应将其放置在面板div内）：

这是jQuery Mobile吗？@Archer是的，这是mobileSorry-我看到你在问题中提到了这一点。我已经说得更清楚了。至于问题本身，我将退出，因为我厌倦了在jQuery Mobile中使用脚本，并关闭了ajax（hijax），以便可以像处理普通网站一样处理它。

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

<div data-role="panel" id="id" data-position="left" data-display="push" data-theme="b">
  <!-- Contents -->
</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');

<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');