如何将jQuery绑定到一个链接<a>的单击函数？

Question

如何使用jQuery将函数绑定到HTML文档中只有一个链接标签的标签？

我的代码如下：

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

但这会绑定文档中的所有链接。

- Gath

---

所有链接都被选中的原因是你使用了$('a')这个选择器，它的意思是“针对每个 A 元素，迭代并添加点击事件处理程序。”实际上你想要表达的是“查找 $('a#show_login') 并添加这个点击事件处理程序。”jQuery会匹配在选择器语句中找到的每个元素。 - Jared Farrish

Answer 1

在Michael的基础上，您需要添加一个return false;。

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

否则，当您点击链接时，浏览器仍会尝试遵循该链接，您将失去JavaScript操作。

- Jeremy B.

---

我通常会设置 href="javascript:void(0);"。 - Aistina

你不应该这样做。jQuery 的重点在于不显眼。如果你保留 href 来执行某些操作，那么即使浏览器没有启用 JavaScript，你也是安全的。但是，你所做的就是让你的链接在没有 JavaScript 的情况下完全无效。 - Jeremy B.

另一方面，不要忘记如果链接被跟踪，需要有东西在那里（比如登录屏幕）。另一种方法是清除href，或者使用#anchor作为链接，这样它就不能被跟踪。或者使用带有关联点击处理程序的span/div。我还会说类似于#show_login的东西。 - Jared Farrish

Answer 2

使用id属性为具有点击事件的锚点/链接命名。

例如：

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

然后使用以下的 jQuery 语句：

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

易如反掌！

- Michael