Question

I have read the following question

Javascript and Anchor Tags, Best Practice?

And it seems to suggest a solution such as the following

<a id="foo" href="#">Click Me</a>

document.getElementByID("foo").onclick = function() { alert("hi"); }

However suppose that I have a bunch of links all calling the same function with a different parameter. My quick and dirty solution would be to generate something like the following

<a href="#" onClick="myFunction('1001');return false">Click Me 1</a>
<a href="#" onClick="myFunction('1002');return false">Click Me 2</a>
<a href="#" onClick="myFunction('1003');return false">Click Me 3</a>

Is there a way to adapt the listener solution to deal with parameters?

Answer 1

You could use a data attribute along these lines on each element in question:

<a href="#" id="foo" data-id="1000">Click Me 1</a>​

And use the following callback:

document.getElementById("foo").onclick = function() { 
    alert(this.getAttribute('data-id'));
}​

In fiddle form here.

A better option, though, might be to use jQuery to handle things. Assuming the link format above, that would look like this:

$('#foo').click(function(){
  alert($(this).attr('data-id'));
});