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
– Nope, Commented Mar 26, 2013 at 15:28
Good questions. It is inside dom ready and the ui-button is generated by jquery ui — user1477388
– user1477388, Commented Mar 26, 2013 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
– Nope, Commented Mar 26, 2013 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
– dev4life, Commented Mar 26, 2013 at 15:35

Nope · Accepted Answer · 2013-03-26 15:34:19Z

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, 2013 at 15:34

Nope

22.4k8 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1477388 Over a year ago

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.

Mikhail Chernykh · Accepted Answer · 2013-03-26 15:33:46Z

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, 2013 at 15:33

Mikhail Chernykh

2,69722 silver badges15 bronze badges

5 Comments

user1477388 Over a year ago

This works (Will accept soon). So, trigger huh? Why not click?

Mikhail Chernykh Over a year ago

click() works also. I think, the real problem is with documentready.

user1477388 Over a year ago

No, I was in doc ready before. The solution was simply changing click to trigger and I am interested to know why.

Mikhail Chernykh Over a year ago

There are some explanations here: stackoverflow.com/questions/2954932/…

Mikhail Chernykh Over a year ago

But anyway, according to manual click() is just a shortcut to trigger('click')

Lemonade · Accepted Answer · 2013-03-26 15:38:58Z

2

This should trigger the event ...

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

answered Mar 26, 2013 at 15:38

Lemonade

5032 silver badges8 bronze badges

Collectives™ on Stack Overflow

jQuery UI Dialog Button Won't Click

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related