stopPropagation does not stop the parent action
<p>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</p>

<p>html</p>

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

<p>jquery</p>

<pre><code>$('#clickme').focus(function(e){
    e.stopPropagation();
});

$('#clickme').click(function(e){
    e.stopPropagation();
});
</code></pre>

<p>jsfiddle: <a href="http://jsfiddle.net/GKvw3/1/" rel="nofollow">http://jsfiddle.net/GKvw3/1/</a><br /><br />
result is that it still goes to stackoverflow.com. any ideas why this is.</p>

<p><strong>EDIT</strong><br />
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 submiting the form (not in markup) will cause the link.. there for i want to do what i explained above and thats why i use the input inside a link in the test.</p>

<pre><code>&lt;table&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;a href="#"&gt;headline&lt;/a&gt;&lt;/td&gt;
    ...
    &lt;td&gt;&lt;input type="submit" id="submitme" value="buy"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>
