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>

• Nope: Where are the elements with class of ui-button? Can you post that HTML too please? Are they dynamically added to the DOM? If so, are you using delegate event bindings? Are you running the code inside a document.ready()?
• Adrian: is your javascript running after $(document).ready()?
• user1477388: Good questions. It is inside dom ready and the ui-button is generated by jquery ui
• Nope: @user1477388: If the button is generated what ever click event you have would propably need to be bound using event delegation, ie: $(closestStaticElement).on('click', '.ui-button', function(){...)
• dev4life: How many elements have the ui-button class? I've usually had to do a "button:contains(...)" kind of thing to narrow down the actual button.

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.

• user1477388: Thanks Francois. In jquery there are many ways to solve things, so this probably works, too. Netme's solution is the one that worked, first, however.

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/

• user1477388: This works (Will accept soon). So, trigger huh? Why not click?
• Mikhail Chernykh: click() works also. I think, the real problem is with documentready.
• user1477388: No, I was in doc ready before. The solution was simply changing click to trigger and I am interested to know why.
• Mikhail Chernykh: There are some explanations here: stackoverflow.com/questions/2954932/…
• Mikhail Chernykh: But anyway, according to manual click() is just a shortcut to trigger('click')

Answer 3

This should trigger the event ...

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