CODEWITHSUNDEEP
javascriptjqueryjquery-events
Dejan.S
Dejan.S

Reputation: 19118

stopPropagation does not stop the parent action

I'm putting a input inside a a-tag, and I want to stop the link when clicking to change the value in the input. Like this:

html

<div id="contain">
    <a href="http://www.stackoverflow.com" target="_blank" id="link">
        <input id="clickme" type="text" value="1"></input> 
        Buy
    </a>
</div>

jQuery

$('#clickme').focus(function(e){
    e.stopPropagation();
});

$('#clickme').click(function(e){
    e.stopPropagation();
});

jsfiddle: http://jsfiddle.net/GKvw3/1/

result is that it still goes to stackoverflow.com. Any ideas why this is?

EDIT
My real scenario is that I got markup like this below. Now what I do is that when somebody click anywhere inside the TR it take the link href. So the problem becomes that submitting the form (not in markup) will cause the link.. therefore I want to do what I explained above and that's why I use the input inside a link in the test.

<table>
    <tr>
    <td><a href="#">headline</a></td>
    ...
    <td><input type="submit" id="submitme" value="buy"/></td>
    </tr>
</table>

Upvotes: 0

Views: 975

Answers (2)

falsarella
falsarella

Reputation: 12437

You can use return false;:

$('#clickme').click(function(e){
    return false;
});

See fiddle here.

I generally use this when I need to do what you want.

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

It should be preventDefault():

$('#clickme').click(function(e){
    e.preventDefault();
});

Doing it in the .focus() is not relevant, you need to "cancel" only the .click().

Updated fiddle.

Upvotes: 1

Related Questions