jQuery UI dialog - problem with event on close

Question

I\'m trying to perform a specific action when I close a jQuery UI dialog. Here\'s a simplified version of my code:

$(\'a.open-trigger\').click(function(){
           


        

Answer 1

You need to take the close click event handler out of the open click event handler

$(function() {
    $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'});

    $('a.open-trigger').click(function(){    
        $('#dialog').dialog('open');
    });


    $('a.close-trigger').click(function(){
        alert("hello");
        var myDialog = $('#dialog');
        if (myDialog.dialog('isOpen'))
            myDialog.dialog('close');
    });
});

Answer 2

You are attaching additional event handlers every time you call .click. That is why it is duplicating.

$('a.close-trigger').click(function(){
                    alert(test);
                    $('#dialog').dialog('close');
            });

Pull that code out onto the same level as the other event binding and it should work as expected.

Answer 3

You've bound a function to the open button that adds a event handler to the close button each time the open event is fired. You should add your close event handler somewhere outside of 'a.open-trigger' event function...

$('a.open-trigger').click(function(){
        var test = 'hello';

        $('#dialog').dialog({bgiframe: true, dialogClass: 'change', resizable: false, draggable: false, modal: true, height: 334, width: 450, autoOpen: false, show: 'fade'});
        $('#dialog').dialog('open');
});

$('a.close-trigger').click(function(){
        alert(test);
        $('#dialog').dialog('close');
});