Question

I took the JQuery UI dialog form sample from JQuery UI website.

Since I wanted that, once the dialog is opened and the form is displayed, that pressing the key submits the form, I added the following in the onReady() :

$.extend($.ui.dialog.prototype.options, {
open: function() {
var $this = $(this);

      // focus first button and bind enter to it
      $this.parent().find('.ui-dialog-buttonpane button:first').focus();
      $this.keypress(function(e) {
          if( e.keyCode == 13 ) {
              $this.parent().find('.ui-dialog-buttonpane button:first').click();
              return false;
          }
      });
  } 

});

This does perfectly the trick (I mean the click() is triggered when it has to), but the following occurs :

When the form is first submited through a press on the key, the submission is performed once.

If I reopen the dialog, and submit it again with a press on the key, the form is submitted twice.

If I reopen the dialog, and submit it again with a press on the key, the form is submitted three times, and so on…

This can be tested with the following fiddle :
http://jsfiddle.net/fWW2E/

Let me add that doing so by clicking on the dedicated “Submit” button works properly, this fails only when pressing the key is involved.

Any ideas ?

Thank you !

Answer 1

Because since you’re assigning this on “open” and your buttons are “closing” the dialog.

When this gets called though:

$('something').dialog('close');

doesn’t actually remove the element, it just hides it. So the next time you click to open up a “new” dialog, you’re really just showing the first one again. However the “open” event is getting fired again every time it’s opened, which is adding a new keypress handler onto it.

Here’s the fiddle. I actually write out to the console an array of the current handlers on that element. You’ll see everytime you open the dialog that there is another keypress handler.

DEMO