Something like this could achieve what you want:
<a href="#" class="link" id="foo-1"></a>
<a href="#" class="link" id="foo-2"></a>
<a href="#" class="link" id="foo-3"></a>
$("a.link").click(function() {
var id = this.id.split('-')[1]; // -> 1, 2, or 3
foo(id);
return false; // prevents follow through of link
});
On a side note, if you want to do a click and directly call a function
without passing arguments, you can do:
$("a.link").click(foo);
function foo() {
...
}
On Jul 13, 4:18 am, Thierry <thi.l...@gmail.com> wrote:
> Hi,
>
> I am trying to remove every Javascript reference from my HTML data
> (except the inclusion headers of course).
> I would like some advice regarding event listeners when parameters
> come into play.
>
> Here is the typical example:
> For event handlers in HTML like:
> <a href="#" onclick="foo();"></a>
> I would have no problem replacing with the following HTML:
> <a href="#" class="foo"></a>
> and Javascript code in separate file:
> $(document).ready(
> function() {
> $("a.foo").click(foo());
> }
> )
>
> However, how would you proceed when parameters are to be passed to "foo
> ()"? E.g:
> <a href="#" onclick="foo(1);"></a>
> <a href="#" onclick="foo(2);"></a>
> <a href="#" onclick="foo(3);"></a>
>
> I was thinking of something like:
> <a href="#" class="foo-1"></a>
> <a href="#" class="foo-2"></a>
> <a href="#" class="foo-3"></a>
> But how to bind the foo() function (with proper parameter) using
> jQuery?
>
> Thanks for any recommendation/comment.
> Thierry
