jQuery UI input inside button - how to prevent triggering click event?

Question

I got inputs inside button. Is it possible to prevent triggering button click event when clicking on input? preventDefault() does not work.

<button class="btn_size">
<input type="text" name="size_y" style="width:60px;" />
<font style="font-weight:normal;">x</font>
<input type="text" name="size_y" style="width:60px;" />
Set size
</button>

http://jsfiddle.net/XeYTJ/

The same happens with stopPropagation(). It does not stop it:

http://jsfiddle.net/XeYTJ/2/

Few years ago I had similar problem. I wanted to be able to disable single accordion button. I wrote a function that was able to bind event at the top of any other events, and it just checked if clicked button had .disabled class. If yes, it simply did return false;. That worked. But only until jQuery 1.8 came up. Something changed in the access to event data, and it does not work anymore.

This question may seem to be easy, so I do aware that I may get alot of -1 votes. But please, check if You are able to resolve the problem, before voting.

event.stopPropagation()?

emerson.marini
– emerson.marini

2013-08-22 16:27:45 +00:00
Commented Aug 22, 2013 at 16:27 — emerson.marini
– emerson.marini, Commented Aug 22, 2013 at 16:27
Still does not work... jsfiddle.net/XeYTJ/2

Flash Thunder
– Flash Thunder

2013-08-22 16:39:25 +00:00
Commented Aug 22, 2013 at 16:39 — Flash Thunder
– Flash Thunder, Commented Aug 22, 2013 at 16:39

Mario S · Accepted Answer · 2013-08-22 17:17:04Z

1

You can make it work in two steps:

Use the same name in the inputs as in the selectors. You have both inputs name="size_y", but you are using selectors $('input[name="y_size"]') and $('input[name="x_size"]'). See the difference?

Add the click-event on the button before the inputs:

$('.btn_size').button({icons: { primary: "ui-icon-arrow-4-diag" }}).click(function(){
    console.log('clicked');
}); 

$('input[name="size_x"]').click(function(e){
    console.log('x');
    e.stopPropagation();
});
$('input[name="size_y"]').click(function(e){
    console.log('y');
    e.stopPropagation();
});

See fiddle.

And if that doesn't work, you could try changing <button> to <div> and use .button() to style it.

answered Aug 22, 2013 at 17:17

Mario S

12k24 gold badges42 silver badges47 bronze badges

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

3 Comments

Flash Thunder Over a year ago

Oh indeed its size_x and x_size ... that is a grave mistake. I'm glad you noticed it. The question seems to be usless for most people then, but I won't delete it, because You really deserve to get points for noticing it.

Mario S Over a year ago

@flashthunder well, not completely useless. It's still not that straightforward with the order in which to bind to the different click-events.

Flash Thunder Over a year ago

Yes you may be right, it is even possible that I tried before with good names but wrong order...

Collectives™ on Stack Overflow

jQuery UI input inside button - how to prevent triggering click event?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related