How to make a span fully clickable?

Question

I'd like to make a span fully clickable.

<span><a href="#" title="Remove" id="159" class="remove">159</a><input type="hidden" name="t[1][p][]" value="159"></span>

The span is assigned a background image which is floated to the right. The image is a plus sign which will basically serve to indicate the record can be moved to another div.

Rather than having a link and an image both clickable, is it possible to simply have the whole span act like a anchor?

The click must be detected by jQuery.

Answer 1

$("a.remove").closest("span").click(function(){alert('Test');}); will do.

By the way, it's not a good idea to set the id to a numeric-only value. (You have the id of the a element set to "159"). This makes your markup invalid, as any identifier has to start with a latin character followed by characters, digits, dashes etc.

Answer 2

HTML:
<span id="myspan">....</span>

Script:
$("#myspan").click(function(){
alert('I got a click');
});

Answer 3

Make the Anchor block level (ie display:block) and it will fill the span, assuming your span itself has a defined size (otherwise it will just wrap the anchor and they will both be the same size)

Answer 4

$('a.remove').closest('span').click(function(){
    $('a.remove', this).trigger('click');
})

This will fire the link's click event too.

Answer 5

http://jsfiddle.net/mDLwZ/1/

I think there's a problem with the fact that when you click the span, it clicks the href inside for some reason, here's a small work around.