Passing data to a jQuery click() function

Question

Hi

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.

Answer 1

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

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

Answer 2

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

});

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

Answer 4

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 as follows:
 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>

Answer 5

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