CODEWITHSUNDEEP
javascriptjquery
orcw574
orcw574

Reputation: 33

Textbox inside a button - Bootstrap twitter

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.

Upvotes: 0

Views: 106

Answers (2)

Sari Alalem
Sari Alalem

Reputation: 870

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

Upvotes: 0

kamesh
kamesh

Reputation: 2424

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

Upvotes: 1

Related Questions