为什么在 Firefox 中调用这个 jQuery 函数会失败？答案

【问题标题】：Why does the call to this jQuery function fail in Firefox?为什么在 Firefox 中调用这个 jQuery 函数会失败？
【发布时间】：2010-09-30 23:19:53
【问题描述】：

我的网页链接中有以下代码行：

<a href="javascript:$('#comment_form').toggle('normal')" title="Comment on this post">

这会产生一个链接，应该会弹出一个隐藏的表单。它适用于 Safari，但在 Firefox 中，我只得到一个几乎是空的页面，只有以下文本：

[object Object]

我确定这与 jQuery 函数返回的值有关，但我不确定如何修复对 JavaScript 函数的调用，因此它也适用于 Firefox。

【问题讨论】：

标签： javascript jquery firefox

【解决方案1】：

为了爱……

<script type='text/javascript'>
jQuery(function($){   # Document ready, access $ as jQuery in this scope
    $("a#comment").click(function(){  # bind a click event on the A like with ID='comment'
         $('#comment_form').toggleClass('normal');  # Toggle the class on the ID comment form
         return false;  # stop the href from being followed. 
    }); 
});
</script>
....
<a id="comment" href="/you_need_javascript_sorry.html" title="Comment on this post">
   [Comment]
</a>

请不要像在 HTML 中那样嵌入 JavaScript。

如果你像这样在 HTML 中嵌入 JavaScript，你：

制作杂乱的代码。
遇到奇怪的问题，就像您刚刚使用黑客解决它一样
尝试中键单击链接的用户将无处可去。
维护散布在页面链接中的代码的可执行部分将以失败告终。
当用户没有 javascript 时不要优雅降级
当您开始需要执行诸如存储报价超过 2 层之类的操作时会遇到问题。

【讨论】：

有理由不这样做会很有帮助。
当然更可调试，但有时坚持这样做会妨碍简单。
与您不在页面上内联 CSS 的原因相同。此外，它与所有浏览器兼容，从长远来看更易于维护。

【解决方案2】：

试试：

<a href="javascript:void($('#comment_form').toggle('normal'))" title="Comment on this post">

在void() 中包含脚本将禁止浏览器显示执行结果。

更新

我直接回答了最初的问题，并给出了最省力的解决方案。正如这里的其他一些答案中提到的那样，我个人会将我的标记和 JavaScript 分开并动态添加 onclick 处理程序，而不是将脚本嵌入到 href 属性中。

【讨论】：

-1：这种方法已经过时了。这不利于可访问性。
感谢您的回答。它工作得很好，但我会接受上面更深入的那个。

【解决方案3】：

尝试将 href 中的内容移动到 onclick。一般来说，您应该避免在 href 属性中使用 JavaScript 代码。

【讨论】：

同意；如果您绝对必须在 a 标记本身中包含 javascript（通常本身就是一个坏主意），至少将其放在 onclick 属性中。更好的方法可能是在单独的脚本标签/文件中将点击事件绑定到带有 jQuery 的链接。
没错。我只是假设 OP 有充分的理由内联它。

【解决方案4】：

用途：

<a href="http://full-url-to-directory/page#comment_form"
   onclick="$('#comment_form').toggle('normal');return false;"
   title="Comment on this post">

虽然您需要在服务器上做一些事情，以便当您通过请求获得对 comment_form 元素的引用时，默认情况下它是可见的。这将允许您的页面（这部分）在没有启用 JavaScript 的情况下工作。

【讨论】：

URL 片段 (#comment_form) 通常不会发送到服务器
正确 - 您需要拥有完整的 URL。我会解决这个问题。