Question

hope you can help me. I have html markup like this:

<a href="error.htm" class="button" id="_uiStart" style="-moz-border-radius: 4px 4px 4px 4px;">
<span>Start</span>
<input type="text" id="_uiCode">
</a>

Normaly, when user clicks on the textbox, the page redirects to “error.htm”. I wanted to prevent that so I use jQuery to cancel that:

$(document).ready(function() {
   var mute = function(event){        
       event.stopPropagation();
   };    
   $('a.button input').click(mute)
    .mousedown(mute)
    .mouseup(mute);
}

However, this does not work, the click still gets processed by anchor and redirects to “error.htm”.

Please help, thank you.

Answer 1

Return false instead (working fiddle)

stopPropagation is only for event handlers, not default behavior.

preventDefault does what you want, but returning false triggers both.

Updated fiddle:

Add $(this).focus() before returning and you should be golden. I would however suggest you look at another way of setting up your html so the <a> doesn’t wrap the input in the first place.