为什么我需要多次单击“是”按钮才能关闭 Jquery 对话框弹出窗口？答案

【问题标题】：Why do I need to click several times on "Yes" button to close the Jquery dialog popup?为什么我需要多次单击“是”按钮才能关闭 Jquery 对话框弹出窗口？
【发布时间】：2020-11-15 10:36:16
【问题描述】：

我有一个带有复选框的网络表单，用于启用或禁用某些功能。

当用户点击复选框启用它时，我需要显示一个对话框弹出是/否。

我使用 jquery UI 代码来显示这种“是/否”弹出窗口。

用户通过启用复选框启用选项后，并单击“是/否”对话框，他可以取消选中它。在这种情况下，我不想显示“是/否”对话框弹出窗口。

所以我的脚本需要先检查复选框是否“选中”才能显示弹出窗口。

问题

它适用于第一个“检查”操作。但是如果用户取消选中并重新选中复选框，弹出对话框就会显示出来，这一次用户需要点击几次“是”按钮才能关闭对话框弹出窗口。

您可以使用下面的代码轻松重现此问题：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

</head>
<body>
    <label><input data-toggle="collapse" href="#mycheckbox" role="button"
        aria-expanded="false" aria-controls="mycheckbox"
        type="checkbox" 
        name="mycheckbox_enable"
        id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
    <div>
    <div></div>
    </div>
    </label>

 <script type="text/javascript">
   function EnableTestB(message) {
        $("#mycheckbox_enable").on('change', function() {
            if ($("#mycheckbox_enable").is(':checked')){
                $('<div></div>').appendTo('body')
                .html('<div><h6>' + message + '?</h6></div>')
                .dialog({
                    modal: true,
                    title: 'Delete message',
                    zIndex: 10000,
                    autoOpen: true,
                    width: 'auto',
                    resizable: false,
                    buttons: {
                        Yes: function() {
                           
                            $(this).dialog("close");
                        },
                        No: function() {                           

                            $(this).dialog("close");
                        }
                    },
                    
                });
            }
            else {
                // If user uncheck the checkbox, we don't do anything.             
                
            }
            });
        };
                
 </script>   
</body>
</html>

【问题讨论】：

问题是每次点击复选框，你会得到几个对话框
Spasiba @sergeykuznetsov 来帮忙。是的，这就是问题所在。你知道我该如何解决这个问题吗？

标签： javascript jquery jquery-ui

【解决方案1】：

发生这种情况是因为每次点击后，都会将一个 div 附加到您的 body 元素中。为了解决它，你可以做这样的事情..

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

</head>
<body>
    <label><input data-toggle="collapse" href="#mycheckbox" role="button"
        aria-expanded="false" aria-controls="mycheckbox"
        type="checkbox" 
        name="mycheckbox_enable"
        id="mycheckbox_enable" onclick="EnableTestB('Would you like to copy-paste your serie of messages A to B fields in order to go faster?');">
    <div>
    <div id="checkbox_message"></div>
    </div>
    </label>

 <script type="text/javascript">
   function EnableTestB(message) {
        $("#mycheckbox_enable").on('change', function() {
            if ($("#mycheckbox_enable").is(':checked')){
                $('#checkbox_message').html('<div><h6>' + message + '?</h6></div>')
                .dialog({
                    modal: true,
                    title: 'Delete message',
                    zIndex: 10000,
                    autoOpen: true,
                    width: 'auto',
                    resizable: false,
                    buttons: {
                        Yes: function() {
                            $(this).dialog("close");
                        },
                        No: function() {
                            $(this).dialog("close");
                        }
                    },
                    
                });
            }
            else {
                // If user uncheck the checkbox, we don't do anything.             
                
            }
            });
        };
                
 </script>   
</body>
</html>

在上面的代码中，一个id为#checkbox_message的div已经存在于DOM中，并且html只在这个div中被操作，所以在dom中没有附加多个弹出窗口。

【讨论】：