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

Question

I want to open a jquery-mobile dialog programmtically. 我想以编程方式打开一个jquery-mobile对话框。 I tried to do: 我试着做：

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

This is my html file: 这是我的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>

This is my jsfiddle page: http://jsfiddle.net/kK24p/ 这是我的jsfiddle页面： http : //jsfiddle.net/kK24p/

All I want to do is open the dialog using js instead of the button. 我要做的就是使用js（而不是按钮）打开对话框。

If someone could help me it would be great. 如果有人可以帮助我，那就太好了。

Thanks a lot in advance. 非常感谢。

Answer 1

Working examples: 工作示例：

Solution 1 解决方案1

Page 1: - index.html 第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>

Page 2: - dialog.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>

Solution 2 解决方案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>

Correct way of programatically opening dialogs requires changePage function, like this: 以编程方式打开对话框的正确方法需要changePage函数，如下所示：

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

Same thing works if you need to open external dialog: 如果您需要打开外部对话框，则同样的方法适用：

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

Answer 2

I did couple of changes to your code please refer it. 我对您的代码做了几处更改，请参考。 I removed the closing tag for opening div <div data-role="content"> in first page. 我删除了在首页中打开div <div data-role="content">的结束标记。 It is wired but solve it in the future and the next point is you cannot load external page like that in a popup. 它是有线的，但将来会解决。接下来的一点是，您将无法像在弹出窗口中那样加载外部页面。 Please refer this link How to load an external page in JQM popup 请参考此链接如何在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

Working examples: 工作示例：

Solution 1 解决方案1

Solution 2 解决方案2

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

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

问题描述

2 个解决方案

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

Working examples: 工作示例：

Solution 1 解决方案1

Solution 2 解决方案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