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