在 href 标签中使用 jQuery

Question

我正在尝试找到一种方法，在<a>标签的href属性中调用jQuery语句。我的代码如下：

<a href="javascript:$('#myElement').addClass('test');">

当我点击这个链接时，浏览器（Firefox）会跳转到一个空白页面，并显示以下内容：

[object Object]

重要提示：我正在使用第三方插件生成锚点代码，因此无法访问<a>标签的onclick事件并添加代码。我也不想引入一个函数作为语句的包装器，因为我们正在使用AJAX。

有趣的是，这个方法可以实现：

<a href="javascript:alert('test');">

为什么jQuery语句不能在href属性中工作？是因为美元符号引起了问题吗？有办法让它工作吗？

- OrangeFrog

Answer 1

您可以通过将调用包裹在一个函数中来避免这种情况：

<a href="javascript:(function(){$('#myElement').addClass('test');})()">asdf</a>

但更好的方法是使用JavaScript的click事件：

<a href="#" onclick="$('#myElement').addClass('test');return false;">asdf</a>

甚至更好的是，在其他地方进行连接：

<a href="#" id="somelink">asdf</a>

jQuery(document).ready(function() {
    jQuery("#somelink").click(function() {
        $('#myElement').addClass('test');
        return false;
    });
});    

- Joe Enos

Answer 2

javascript: URI的返回值是组成页面的数据，浏览器会跳转到这个页面。

调用jQuery将返回一个jQuery对象。调用alert将返回undefined（被视为无内容响应）。

你可以将脚本封装在void()的调用中 （将jQuery的返回值作为其参数传递），但我真的建议解决底层系统问题，以免首先使用javascript: URIs。

- Quentin

---

谢谢Quentin - 我没有想到在void函数中使用jQuery对象作为参数。这个方法非常有效。我正在使用另一个开发人员编写的旧遗留脚本，目前我没有时间重写它，否则我会完全避免javascript。不过还是感谢你对这个问题的帮助。 - OrangeFrog

FYI：为了使答案完整无误，HREF属性的值应为：javscript:void($('#myElement').addClass('test')) - OrangeFrog