单击按钮时防止jquery ui打开第二个对话框

Posted 2023-05-08

【中文标题】单击按钮时防止jquery ui打开第二个对话框

【英文标题】：Prevent jquery ui opening a second dialog box when clicking on a button

【发布时间】：2017-01-26 20:39:42

【问题描述】：

我有一个 2 层的传单地图，当我单击“保存”按钮时，它会打开一个对话框，其中包含一个表单，可以将一些信息发送到我的数据库。

当我的第一层被选中并单击“保存”按钮时，它会打开与我的第一层对应的对话框。

但是，当我的第二层被选中并单击“保存”按钮时，它会打开与我的第二层相对应的对话框，而且还会打开我之前为第一层打开的表单。

那么，是否可以阻止打开此表单？ 因为如果我做一个.dialog('close')，它在表单上不对应，它可以工作，但我们可以看到它打开然后关闭，所以这不是很好！

我已经测试过 .dialog("destroy");和 .remove();但它会删除我在 DOM 中的对话框，之后我无法再打开它们。

所以，这里有一些代码：

//Code in the oneachfeature function from my layer1
 
$('#save').on('click',function(e)
var dialog1 = $("#dialog1").dialog(
                            autoOpen: false,
                            modal: true,
                            show: 
                                  effect: "blind",
                                  duration: 500
                                ,
                            hide: 
                                  effect: "blind",
                                  duration: 500
                                ,
                            close: function(event, ui) 
                                    //$(this).dialog("destroy");
                                    //$(this).dialog("close");
                                    //$(this).remove();
                                ,
                            height: 400,
                            width: 500,
                            modal: true,
                            position: 
                                my: "center center",
                                at: "center center",
                                of: "#map"
                                ,
                            buttons: 
                            Valider: function() 
                                         
                                        // Ajax to send informations in the form
 
                                        , // end of valider
                            Annuler: function() 
                                        dialog1.dialog("close");
                                        ,
                                    , // end of buttons                
                                ); // end of dialog
 
                            dialog1.dialog("open"); 

                            $("#dialog2").dialog('close');
 
                        );   // end of save
 
 
 
 
//Code in the oneachfeature function from my layer2
 
$('#save').on('click',function(e)
var dialog2 = $("#dialog2").dialog(
                            autoOpen: false,
                            modal: true,
                            show: 
                                  effect: "blind",
                                  duration: 500
                                ,
                            hide: 
                                  effect: "blind",
                                  duration: 500
                                ,
                            close: function(event, ui) 
                                    //$(this).dialog("destroy");
                                    //$(this).dialog("close");
                                    //$(this).remove();
                                ,
                            height: 400,
                            width: 500,
                            modal: true,
                            position: 
                                my: "center center",
                                at: "center center",
                                of: "#map"
                                ,
                            buttons: 
                            Valider: function() 
                                         
                                        // Ajax to send informations in the form
 
                                        , // end of valider
                            Annuler: function() 
                                        dialog2.dialog("close");
                                        ,
                                    , // end of buttons                
                                ); // end of dialog
 
                            dialog2.dialog("open"); 
                         
                            $("#dialog1").dialog('close');
 
                        );   // end of save

【参考方案1】：

每个图层的两个保存按钮似乎具有相同的 ID。安装“onclick”侦听器时可能存在冲突？所以行为不是你所期望的。 尝试为这些按钮设置唯一的 ID

【讨论】：

是的，你是对的，如果我设置了唯一的 ID，它就可以工作，但我只想有一个按钮来完成它

也许您可以尝试使用 .off() 方法“清理”点击事件：api.jquery.com/off

另外，我建议您命名生成对话框的函数，并使用参数对其进行分解。然后使用 .on() 和 .off() 和命名函数的可读性应该更好:)

所以，我尝试为我的第一层添加$('#save').off('click',function(e) dialog1.dialog("open"); );，并为第二层添加dialog2，但它仍然相同。也许我做错了，你有一个例子？

嘿，我做了一个 JSFiddle 来更清楚地了解 off() 函数的使用。 jsfiddle.net/bzgyypfm 随意通过匿名函数更改处理程序“showDialog”，就像我在 cmets 中所说的那样。只是写作的一个想法。希望这会有所帮助！