jQuery的移动。无法以编程方式打开对话框；尝试了我能想到的一切

Question

我想以编程方式打开一个jquery-mobile对话框。 我试着做：

$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance

这是我的html文件：

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="localhost/static/dialog" data-role="button">Is this a question?</a></p>
    </div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>
</body>
</html>

这是我的jsfiddle页面： http : //jsfiddle.net/kK24p/

我要做的就是使用js（而不是按钮）打开对话框。

如果有人可以帮助我，那就太好了。

非常感谢。

Answer 1

工作示例：

解决方案1

第1页： index.html

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a href="dialog.html" data-rel="dialog" data-role="button">Open dialog</a></p>
    </div>
</div>
</body>
</html>

第2页： dialog.html

<div data-role="page">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>

解决方案2

<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
    <script>
    $(document).on('pagebeforeshow', '#index', function(){ 
        $(document).on('click', '#open-dialog', function(){ 
            $.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});  
        });
    });
    </script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">
        <p></p>
        <p><a id="open-dialog" data-role="button">Onen dialog</a></p>
    </div>
</div>
<div data-role="dialog" id="jenia-dialog">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        This is dialog content
    </div>
</div>  
</body>
</html>

以编程方式打开对话框的正确方法需要changePage函数，如下所示：

$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});

如果您需要打开外部对话框，则同样的方法适用：

$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});

Answer 2

我对您的代码做了几处更改，请参考。 我删除了在首页中打开div <div data-role="content">的结束标记。 它是有线的，但将来会解决。接下来的一点是，您将无法像在弹出窗口中那样加载外部页面。 请参考此链接如何在JQM弹出窗口中加载外部页面

<div data-role="page">
    <div data-role="header">
        <h1>Sample</h1>
    </div>
    <div data-role="content">

        <a href="#dialog-jenia" data-rel="popup" data-role="button">Is this a question?</a>


</div>
<div data-role="popup"  id="dialog-jenia">
    <div data-role="header">
        <h1>Dialog</h1>
    </div>
    <div data-role="content">
        <p>Is this an answer?</p>
    </div>
</div>

jQuery的移动。无法以编程方式打开对话框；尝试了我能想到的一切

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-06-06 08:16:46

工作示例：

解决方案1

解决方案2

解决方案2
0 2014-06-06 04:30:55

jQuery的移动。 无法以编程方式打开对话框； 尝试了我能想到的一切

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-06-06 08:16:46

工作示例：

解决方案1

解决方案2

解决方案2 0 2014-06-06 04:30:55

jQuery的移动。无法以编程方式打开对话框；尝试了我能想到的一切

解决方案1
1 已采纳 2014-06-06 08:16:46

解决方案2
0 2014-06-06 04:30:55