jquery-ui-dialog - 如何挂钩到对话框关闭事件

我正在使用jquery-ui-dialog插件

我正在寻找在某些情况下关闭对话框时刷新页面的方法.

有没有办法从对话中捕获一个关闭事件？

我知道我可以在单击关闭按钮时运行代码但不包括用户使用escape或右上角的x关闭.

1> Brownie..：

---

我找到了!

您可以使用以下代码捕获close事件:

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

显然,我可以用我需要做的任何事情来取代警报.
编辑:从Jquery 1.7开始,bind()已成为on()

---

这应该更新为使用on()而不是现在已经过时的bind().

---

拼写错误:$('div#popup_content').bind('dialogclose',function(event)){...}

---

请记住,如果之前从未在页面上打开过jQuery UI对话框,那么DOM中将不存在overlay div.因此,你可以考虑做这样的事情:`$('body').on('dialogclose','.ui-dialog',function(){...});`

2> Darryl Hein..：

---

我相信您也可以在创建对话框时执行此操作(从我执行的项目中复制):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

注意 close: CloseFunction

---

这个答案似乎比接受的答案更正确.此外,可以在此处找到正确的API文档:http://api.jqueryui.com/dialog/#event-close

---

Jake N - 你需要实际编写一个名为'CloseFunction'的对话框可以访问的函数,这样就可以了,例如上面你可以编写`var CloseFunction = function(){//这里你自定义关闭的东西};`

3> 小智..：

---

$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true, 
buttons: {
  "SUBMIT": function() { 
    $("form").submit();
  }, 
  "CANCEL": function() { 
    $(this).dialog("close");
  } 
},
**close: function() {
  alert('close');
}**
});

4> Taksh..：

---

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

对话框的"close"属性给出了close事件.

5> Umair Noor..：

---

你也可以尝试这个

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

6> 小智..：

---

这对我有用...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});

7> Disper..：

---

从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法.

因为没有人真正使用使用创建答案.on()而不是bind()我决定创建一个.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

8> 小智..：

---

在示例下添加选项'close'并执行您想要的内联函数

close: function(e){
    //do something
}