Question

I’m trying to write a fairly complex dynamic web page, using JQuery AJAX, and I am struggling with how to relate my links (<a ...>) with the the data their tied to, such as action names, and data element ids. I have pondered several different schemes, but I’m not sure I like any of them.

Building it into onclick, which means I have to configure it in the link generation.

<a onlick="func('abc', 123)">...</a>

Inserting it into the id of the link, which means parsing it out in JavaScript.

<a id="link_abc_123">...</a>

Putting the link in a div with hidden input elements…

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

Is there a best practice or a commonly accepted way of structuring this data?

Answer 1

With HTML5, you have the luxury of using data-* attributes – for example:

<a href="somewhere" data-action="do-this" data-foo="bar">...</a>

Which jQuery actually has support for – calls to $('a').data() will include the data-* values in it.