Passing arguments and values from HTML to jQuery (events)

Question

What is the practice to pass arguments from HTML to jQuery events function. For example getting id of row from db:

<tr class="jq_killMe" id="thisItemId-id">
 ...
</tr>

and jQuery:

$(".jq_killMe").click(function () {
     var tmp = $(this).attr('id).split("-");
     var id = tmp[0]
     // ...
}

What's the best practise, if I want to pass more than one argument? Is it better not to use jQuery? For example:

<tr onclick="killMe('id')">
 ...
</tr>

I didn't find the answer on my question, I will be glad even for links. Thanks.

Edit (pre solution)

So you suggested two methods to do that:

1. Add custom attributes to element (XHTML)
2. Use attribute ID and parse it by regex
3. Attribute data-* attributes in HTML5
4. Use hidden children elements

I like first solution, but... I would like to (I have to (employer)) produce valid code. Here is a nice question and answers:
So what if custom HTML attributes aren't valid XHTML?

And the second is not so pretty as the first, but valid. So the compromise is...

The third is the solution for future, but here is a lot of CMS where we have to use XHTML or HTML4. (And HTML5 is the long process)

Answer 1

You might choose between different ways depending on how many parameters you might need. If you just need more than one, you can either add custom attributes, but that might not be html compliant.

Sometimes you might even need to embed the values within the id like you are doing:

<tr class="jq_killMe" id="thisItemId-id">

But I'd do this like this:

<tr class="jq_killMe" id="thisItemId1">

where 1 is your id, and then use RegEx instead of doing the split:

$(".jq_killMe").click(function () {
     var fullid= $(this).attr('id);
     // do Regex here to either replace or match anything that follows 'thisItemId'
}

Answer 2

The simplest way to do this is to put the information into custom attributes, like this:

<tr class="jq_killMe" id="thisItemId-id" itemId="42" itemName="Answer">
 ...
</tr>

$(".jq_killMe").click(function () {
     var id = $(this).attr('itemId');
     var name = $(this).attr('itemName');
     // ...
}

Remember to correctly escape the values, to prevent XSS.

Answer 3

And what about nested elements?

<style type="text/css">
  .data {display: none}
</style>

<tr class="jq_killMe">
   <span id="data-id" class="data">my id</span>
   <span id="data-name" class="data">answer</span>
   ...
</tr>

But there is some questions:

• Is it this way safe as to accessibility?
• How percentage of users has disabled css?

Edit

Better way is to use <input type="hidden" />

<tr class="jq_killMe">
   <input type="hidden" name="data-id" value="my id" />
   <input type="hidden" name="data-name" value="answer" />
   ...
</tr>

and jQuery seems like this

$(".jq_killMe").click(function() {
    var id = $(this).children("input[name='data-id']");
    //...
});

Answer 4

It depends on context. Express the data in the most semantically way that is appropriate.

It might use a class. It might use data in a cell within the row. It might use data in an attribute of an element in a cell (e.g. a URI in the href of an anchor).

There isn't a generic solution that is always best.

Answer 5

Another option is to provide the data via script and then use the row-id to look it up.

e.g.

<script>
 var MyData = {
  table: [
   { name: "John", age: 20 },
   { name: "Jane", age: 40 }
  ]
 }
</script>

then lookup the data with the following:

$(".jq_killMe").click(function () {
 var tmp = $(this).attr('id').split("-");
 var id = tmp[0];
 var data = MyData.table[id];
 // ...
}