Passing data to a jQuery click() function

Question

I have a simple span like so

<span class="action removeAction">Remove</span>

This span is within a table, each row has a remove span.

And then I call a URL using AJAX when that span is clicked. The AJAX event needs to know the ID of the object for that row? What is the best way of getting that ID into the click function?

I thought I could do something like this

<span class="action removeAction" id="1">Remove</span>

But an ID should not start with a number? Right? Then I thought I could do

<span class="action removeAction" id="my1">Remove</span>

Then just strip the 'my' part from the ID, but that just seems Yuk!

Below is my click event and where my AJAX event is.

<script type="text/javascript" language="text/javascript">

$(document).ready(function()
{

    $(".removeAction").click(function()
    {
        //AJAX here that needs to know the ID            
    }
});

</script>

I am sure there is a nice way of doing this?

Note: I am not looking for

$(this).attr("id");

I want to be able to pass more than one piece of information

Thanks. Jake.

Solution 1

If you insist on using old-school HTML 4.01 or XHTML:

$('.removeAction').click(function() {
 // Don’t do anything crazy like `$(this).attr('id')`.
 // You can get the `id` attribute value by simply accessing the property:
 this.id;
 // If you’re prefixing it with 'my' to validate as HTML 4.01, you can get just the ID like this:
 this.id.replace('my', '');
});

By the way, in HTML5, the id attribute can start with a number or even be a number.

Then again, if you’re using HTML5 anyway, you’re probably better off using custom data attributes, like so:

<span class="action removeAction" data-id="1">Remove</span>

Solution 2

$(this) within your click function represents the clicked element

$(".removeAction").click(function() {
    //AJAX here that needs to know the ID
    alert($(this).attr('id'));           
}

Solution 3

The following code will get you the ID of the clicked span. Using the ID isn't perfect, but it will work.

$(".removeAction").click(function() {
  alert($(this).attr("id"));
});

Solution 4

You could have a hidden field on each row which stores the ID and/or other data needed in a JSON object & use that instead of hacking around with the span tag.

<tr>
<td>
<span class="action removeAction">Remove</span>
<input type="hidden" value="1" />
</td>
</tr>

$('.removeAction').click(function(){
  var id = $(this).next().val();
  // do something...
});

HTH

View more solutions

Comments

[Jake N]

Thanks Glen. This isn't what I am looking for [will edit my post].

[Jake N]

Thanks Tim. This isn't what I am looking for [will edit my post].

[Mathias Bynens]

Why use $(this).attr('id') instead of this.id?

[Jake N]

Ah, custom attributes are OK? I thought they were W3C badness?

[Jake N]

Didn't know that this.id was the same - nice

[Mathias Bynens]

@jakenoble: Why would they be? They’re awesome, and very useful in cases like yours: w3.org/TR/html5/dom.html#custom-data-attribute

[Mathias Bynens]

@jakenoble: It’s called JavaScript. :)

[Mathias Bynens]

Why use $(this).attr('id') instead of this.id?

[Jake N]

Haha. Head stuck in jQuery and PHP too long to remember

[Jake N]

Thanks. Not thought of that. Somewhat chunky I feel and not as elegant as custom attributes.

[Sunny]

@jakenuble - I agree to the "chunky"-ness of the solution. The page might not validate for xHTML with custom attributes...

[Sunny]

@jakenoble - this is a good place to see some arguments for/against custom attributes: stackoverflow.com/questions/994856/…

[Flatlin3]

To keep it the jQuery-Way :-) I do this strictly to avoid possible x-browser problems ...