tags:

views:

882

answers:

2

How do i bind a function using jquery to one and only one link label in my html document which has several links?

my code looks like this;

$("a").click(function(){ $("#login").slidedown("slow"); });

but this binds all the links in the document ...

Gath

+6  A: 

Name your anchor/link that has the click event with an id attribute.

So for instance:

<a href="..." id="clicked_link">...</a>

And then use the following jquery statement:

$("#clicked_link").click(function(){ $("#login").slidedown("slow"); });

Easy as pie!

Michael
+2  A: 

To expand on Michael, you'll want to add a return false;

$("#clicked_link").click(function(){
    $("#login").slidedown("slow");
    return false;
});

Otherwise when you click the link the browser will still attempt to follow the link and you'll lose the javascript action.

Jeremy B.
I usually set href="javascript:void(0);"
Aistina
you should not do that. The point of jquery is to be unobtrusive. If you leave href to do something, you are then safe if the browser does not have javascript enabled, what you've done is made your link completely ineffective without javascript.
Jeremy B.
OTOH, don't forget if the link is followed, something needs to be there in case (like a login screen). Another way of doing it is to clear the href, or use an #anchor as the link so it can't be followed. Or use a span/div with an associated click handler. I would also say something like #show_login.
Jared Farrish