jQuery UI Dialog Button Won't Click

Question

The alert is working, but the button just won't click...

$('#loginDialog .field input').keyup(function (e) {
     if (e.keyCode == 13) {
         alert('it is working!');
         $('.ui-button').click();
         return false;
     }
});

I have tried many different things, including reinitializing the method when the dialog gets opened, but nothing seems to work...

Html:

<div id="loginDialog" title="Please Login">
     <div class="label">Password:</div>
     <div class="field"><input type="password" /></div>
</div>

Answer 1

the ui-button is generated by jquery ui

I'm assuming from your comment that the button is generated dynamically and that any click event you have bound to is will have to be bound using event delegation, similar to:

$('body').on('click', '.ui-button', function(){...)

Instead of body , using the closest static element will work as well and would be preferred.

Answer 2

Please, try this:

$(function() {
$('#loginDialog .field input').keyup(function (e) {
     if (e.keyCode == 13) {
         alert('it is working!');
         $('.ui-button').trigger('click');
         return false;
     }
});

$('.ui-button').click(function() {
   alert('hello world'); 
});
};

Here there is an example: http://jsfiddle.net/netme/YZH3B/

Answer 3

这应该触发事件...

 $('.ui-button').trigger('click');