Textbox inside a button - Bootstrap twitter

Question

I want to set a textbox inside a button. I'm having trouble with the click event of the text box - whenever I click the textbox, it clicks the button as well and fires the button's event. I want to separate those two events - so when I'll click the textbox in order to type, it won't fire the event that's connected to the button click. How can I accomplish that?

Edit: I've tried using stopPropagation and preventDeafult but the event of the button fires before it reaches my event.

Mistyped question? I don't see the example. Anyway, try this: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — blgt, Mar 10 '14 at 09:39
maybe you are not reaching the stopPropagation function...where you have kept it in your code...can you show us the javascript (jsFiddle would be appreciated) — sumitb.mdi, Mar 10 '14 at 09:44
What is your exact requirement? If a button click is not supposed to be invoked on text box click .. when should it? and if possible give in the fiddle http://jsfiddle.net/ — A J, Mar 10 '14 at 09:47
Any specific reason for keeping the textbox inside buton? Or is it just the UI requirement? — A J, Mar 10 '14 at 09:55

score 1 · Accepted Answer · answered Mar 10 '14 at 09:57

1

For you requirement this code will work...

$('#btn').click(function(){
this.preventDefault();
    alert("wont fire");
});

$('#txt').on('click',function(){
    alert("text is clicked");
});

DEMO take a look at difference between this and event here

answered Mar 10 '14 at 09:57

kamesh

2,374
3
25
33

Sari Alalem · Answer 2 · 2014-03-10T10:14:16.430

Maybe there's something wrong with the HTML layout, Here's something that works just fine, by giving a z-index to each element:

HTML:

<div  style="z-index: 2; position:absolute; top:0"> 
   <input id="text" type="text"/>
</div>
<div style="z-index: 1; position:absolute; top:0 ">
   <input id="button" style="width:200px; height:40px; text-align:right" type="Button" value="button"/>
</div>

JS:

$("#text").click(function(){
    alert("text clicked");
});
$("#button").click(function(){
    alert("button clicked");
});

Here's a live demonstration

Textbox inside a button - Bootstrap twitter

2 Answers2