How to make a span fully clickable?

I'd like to make a span fully clickable.

<span><a href="#" title="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.

5 Answers

HTML:

<span>....</span> 

Script:

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

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)

$("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.

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

This will fire the link's click event too.

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.