jquery dialog close not fired

Question

I have defined my dialog on the page load. I can see the dialog and everything seems to be fine so far:

dlg1 = $("#modalHolder");
dlg1 = dlg1.dialog({
    width: 300,
    height: 150,
    modal: true,
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    draggable: false,
    overlay: {
        backgroundColor: 'red',
        opacity: 0.65
    },
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

Now I would like to set the close event dynamically, so I tried this:

function setCloseFunction(fun)
{
    dlg1.dialog({
        close: function(event, ui)
        {
          alert("2");
          fun();
        }
    });
}

And I call it as:

setCloseFunction(new Function("alert('1')"));

However when closing the dialog, the alert never appears. Any ideas?

Answer 1

You should write the following:

dlg1.bind('dialogclose', function(event, ui) {
    alert("2");
    fun();
});

setCloseFunction(function() { alert('1'); });

EDIT: To remove the function, you can call unbind('dialogclose').

Answer 2

The syntax used in setCloseFunction is only correct when you're initializing a dialog. If the dialog already exists, as in your case, you normally change options like this:

dlg1.dialog('option', optionName, value);

For events, such as close, you bind a listener to it:

dlg1.bind('dialogclose', function(event, ui) {
  ...
});