Why does my JQuery UI dialog not register keydown events?

Question

Following answers like this one, I wanted to hook the enter key press on a JQuery dialog so I can trigger the same event as when you click "OK", however the event is never called, and consequently I'm never getting the alert "it worked":

 $("#logout_popup").dialog(
                {
                    title: "Log Out",
                    width: 'auto',
                    height: 'auto',
                    modal: true,
                    draggable: false,
                    resizable: false,
                    open: function(e) {
                        $('.ui-widget-overlay').hide().fadeIn(600);

                        //This is the event that's never called
                        $(e.target).keydown(function(ev) {
                            alert("Worked!");
                        });
                    },
                    show: {
                        effect: 'fade',
                        duration: 600
                    },
                    hide: {
                        effect: 'fade',
                        duration: 600
                    },
                    buttons: [
                        {
                            text: "Yes",
                            click: logout
                        },
                        {
                            text: "No",
                            click: function() {
                                $('#logout_popup').dialog('close');
                            }
                        }
                    ],
                    close: clear_forms
                });

Most of the dialog settings are irrelevant, but I included them all just in case. How come the event is never being called?

I should add that if I use the event $("#logout_popup").keydown, it also doesn't work, but if I use $(document).keydown, it does work (although I'd rather not have to filter every single event in the document.

How does the `dialog()` function look, how do you bind or pass the event to `open()`? If I'm not mistaken... — loveNoHate, Feb 09 '14 at 05:23
Open (which is one of the fields of the object you pass in to dialog()) is automatically called by the JQuery library when the dialog is about to open. — Migwell, Feb 09 '14 at 05:35

loveNoHate · Answer 1 · 2014-02-09T06:22:17.863

This would be the way to trigger the alert at least and catch the event of keydown (on some Element...)

open: function() {
    $('.ui-widget-overlay').hide().fadeIn(600);
    $('theElementYouWant').keydown(function(e) {
         alert("Worked!");
    });
},

If you want to pass the keydown event from down up, you should try

$("#logout_popup").keydown(function(e) {
  $(this).dialog({
           title: "Log Out",
           width: 'auto',
           height: 'auto',
           modal: true,
           draggable: false,
           resizable: false,
           open: function() {
             $('.ui-widget-overlay').hide().fadeIn(600);
             if ( e.which == 13 ) 
                   alert('Hurrah!');
           },

You can pass the event with call(this,event), but I don't know wherefrom and when you want that.
From here: http://forum.jquery.com/topic/how-to-pass-event-target-to-a-function (@KevinB).
Call: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call.

Why does my JQuery UI dialog not register keydown events?

1 Answers1