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>

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()`? — Nope, Mar 26 '13 at 15:28
Good questions. It is inside dom ready and the ui-button is generated by jquery ui — user1477388, Mar 26 '13 at 15:31
@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(){...)` — Nope, Mar 26 '13 at 15:32
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. — dev4life, Mar 26 '13 at 15:35

score 3 · Answer 1 · answered Mar 26 '13 at 15:34

3

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.

answered Mar 26 '13 at 15:34

Nope

22,147
7
47
72

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. – user1477388 Mar 26 '13 at 15:35

score 2 · Accepted Answer · answered Mar 26 '13 at 15:33

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/

answered Mar 26 '13 at 15:33

Mikhail Chernykh

2,659
22
15

This works (Will accept soon). So, `trigger` huh? Why not `click`? – user1477388 Mar 26 '13 at 15:34
`click()` works also. I think, the real problem is with `documentready`. – Mikhail Chernykh Mar 26 '13 at 15:36
No, I was in doc ready before. The solution was simply changing `click` to `trigger` and I am interested to know why. – user1477388 Mar 26 '13 at 15:38
There are some explanations here: http://stackoverflow.com/questions/2954932/difference-between-jquery-click-bind-live-delegate-trigger-and-on – Mikhail Chernykh Mar 26 '13 at 15:44
2

But anyway, according to manual `click()` is just a shortcut to `trigger('click')` – Mikhail Chernykh Mar 26 '13 at 15:46

score 2 · Answer 3 · answered Mar 26 '13 at 15:38

2

This should trigger the event ...

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

answered Mar 26 '13 at 15:38

Lemonade

503
2
8

jQuery UI Dialog Button Won't Click

3 Answers3