将 Jquery UI 对话框添加到按钮答案

【问题标题】：Adding Jquery UI Dialog to a button将 Jquery UI 对话框添加到按钮
【发布时间】：2014-10-06 12:46:58
【问题描述】：

我写了一个简单的代码测试 Jqyery UI 对话框，如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="topo.css">
    <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <script>
        plugin = {
            mainPageRenderer: function () {
                var plugin = this;
                var addButton = $('<input id="addButton" class="addButton" type="submit" value="+">');
                addButton.click(plugin.addFU);
                plugin.html = $('<div class="main-page"></div>');
                plugin.html.append(addButton);

            },
            addFU:function(){
                $(this).dialog({
                    buttons: [
                        {
                            text: "OK",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
            },
            refresh: function() {
                var plugin = this;
                plugin.mainPageRenderer();
                $("body").append(plugin.html);
            }

        };

        $(document).ready(function() {
            plugin.refresh();
        });
    </script>
</head>
<body>

问题是在 JQUERY UI 对话框中单击“确定”按钮时，原始页面中的“+”按钮消失了。我能阻止它吗？

【问题讨论】：

你能分享一下jsfiddle链接吗？
无法管理 jsfiddle，所以我添加了所有代码。

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

您需要尝试使用

Javascript

<script type="text/javascript">
$(function(){
    var execute = function() {
        alert('This is Ok button');
    }
    var cancel = function() {
        alert('This is Cancel button');
    }
    var dialogOpts = {
        buttons: {
            "Ok": execute,
            "Cancel": cancel
        }
    };
    $("#myDialog").dialog(dialogOpts);
});
</script>

HTML

<input id="myDialog" class="addButton" type="submit" value="+">

或

Javascript

$('#myDialog').dialog({
                        // properties ... 
                        buttons: [{
                                id:"btn-accept",
                                text: "Accept",
                                click: function() {
                                        $(this).dialog("close");
                                }
                        },{
                                id:"btn-cancel",
                                text: "Cancel",
                                click: function() {
                                        $(this).dialog("close");
                                }
                        }]
                });

【讨论】：