How to relate data (id's) to links for JavaScript?

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

Best practice should always be, to strictly separate Code.

That means, you shouldn't include any Javascript into your backend-source code. So personally I'm a big fan of either putting the necesarry data into the elements (your last example) when using a template-engine, or sending just the necesarry data on a separate request (JSON for instance) to the client.

Using jQuery, it's a very convinient way to create data- attributes, where you can store any information, while jQuery will translate the values from those attributes into the data expandos. For instance:

<div id="test" data-foo='bar' data-test='{"cool": "stuff"}'>Just a div</div>

When selecting that element with jQuery var $test = $('#test'), you can access:

$test.data('foo') // === 'bar'
$test.data('test').cool // === 'stuff'

Read more: http://api.jquery.com/data/

Answer 2

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.