How to fire keydown-event before ui-dialog onClose?

Question

I'm using some jQueryUI dialogs like this:

$("#PersonDialog").dialog({
        bgiframe : true,
        autoOpen : false,
        closeOnEscape : true,
        resizable : false,
        height : 150,
        modal : true,
        open: function(){
               activeWindow="dialog"
        },
        close: function(){
               activeWindow="person"
        }
        ....
        ....
    })

I also have some divs that I want to close when escape is pressed. I also use code from this answer, but it didn't solve my problem:

$("body").bindFirst("keydown", function(e) {
        console.info(activeWindow)
            if (e.keyCode == 27) {
                switch(activeWindow){
                    case "dialog":
                         //do something
                    break;
                    case "person":
                        //do something else
                    break;
                    ....
            }
        }
    })
$.fn.bindFirst = function(name, fn) {
    this.on(name, fn);
    this.each(function() {
        var handlers = $._data(this, 'events')[name.split('.')[0]];
        var handler = handlers.pop();
        handlers.splice(0, 0, handler);
    });
};

My problem is that when the dialog is open I press escape, both (div and dialog) get closed and console.info(activeWindow) return "person". I guess that closeOnEscape is fired first and than the keydown-event. Is there a way to change this?

Answer 1

jQueryUI dialog plugin binds keydown event handler to the dialog wrapper, not to 'body'. So when you bind handler to body, and event happens on dialog, the dialog handler will be executed first according to events bubbling principle.

So, I think, what you can do - is just to invoke dialog with closeOnEscape : false, and handle ESC key on body in any way you like, as you already do.

To close dialog you can just call $("#PersonDialog").dialog("close") from there.