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.

Mathias Bynens · Accepted Answer · 2013-03-31 15:14:34Z

14

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>

edited Mar 31, 2013 at 15:14

answered May 10, 2010 at 10:01

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake N Over a year ago

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

Mathias Bynens Over a year ago

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

Flatlin3 · Accepted Answer · 2010-05-10 10:00:05Z

3

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

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

answered May 10, 2010 at 10:00

Flatlin3

1,65914 silver badges26 bronze badges

3 Comments

Jake N Over a year ago

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

Mathias Bynens Over a year ago

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

Flatlin3 Over a year ago

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

GlenCrawford · Accepted Answer · 2010-05-10 10:00:46Z

1

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"));
});

answered May 10, 2010 at 10:00

GlenCrawford

3,3893 gold badges28 silver badges34 bronze badges

5 Comments

Jake N Over a year ago

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

Mathias Bynens Over a year ago

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

Jake N Over a year ago

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

Mathias Bynens Over a year ago

@jakenoble: It’s called JavaScript. :)

Jake N Over a year ago

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

Sunny · Accepted Answer · 2010-05-10 10:13:22Z

1

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

answered May 10, 2010 at 10:13

Sunny

6,3462 gold badges27 silver badges27 bronze badges

3 Comments

Jake N Over a year ago

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

Sunny Over a year ago

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

Sunny Over a year ago

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

dakull · Accepted Answer · 2010-05-10 10:06:30Z

0

You could try jQuery.data(): http://api.jquery.com/jQuery.data , but that would mean server-side generated js code to execute when the page loads so that you can store the ids for later reuse (your remove action)

// this part would have to be server 'generated'
// and by that I'm referring  to the '<?=$row_id?>'
$('table .remove').each(function(){

   var MyElem = $(this);
   MyElem.data('id', <?=$row_id?> );

   MyElem.click(function(){
      the_id = $(this).data('id');
      // ajax call goes here
   });

});

edited May 10, 2010 at 10:06

answered May 10, 2010 at 10:00

dakull

7292 gold badges7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Passing data to a jQuery click() function

5 Answers 5

2 Comments

3 Comments

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related