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

I have the following line of code in a link on my webpage:

我在我的网页上的链接中有以下代码行:

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

This produces a link that should pop open a hidden form. It works on Safari, but in Firefox, I just get an almost-empty page with nothing but the following text:

这会生成一个应该弹出隐藏表单的链接。它适用于Safari,但在Firefox中,我只得到一个几乎为空的页面,只有以下文字:

[object Object]

I'm sure this has something to do with the value returned by the jQuery function, but I'm not sure how to fix the call to the JavaScript function so it works in Firefox, too.

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

4 个解决方案

#1

For the love of...

为了爱...

<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>

Please, don't embed JavaScript like you just did in the HTML.

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

If you embed JavaScript in HTML like that, you :

如果你像这样在HTML中嵌入JavaScript,你:

Make messy code.

制作凌乱的代码。

Have weird problems like you just did with hacks to get around it

像你这样的奇怪问题只是用黑客来解决它

Users trying to middle click links will get sent nowhere.

尝试中间点击链接的用户将无处发送。

Maintaining the executable part of your code interspersed in page links will end in failure.

维护散布在页面链接中的代码的可执行部分将以失败告终。

Don't gracefully degrade when users don't have javascript

当用户没有javascript时,不要优雅地降级

Become problematic when you start needing to do stuff like store quotes more than 2 layers deep.

当你开始需要做超过2层深度的商店报价之类的东西时会出现问题。

#2

Try:

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

Containing the script inside a void() will suppress the browser from displaying the result of the execution.

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

Update

I directly answered the original question, with the solution that would take the least amount of effort. As it's mentioned in some of the other answers here, I personally would keep my markup and JavaScript separate and dynamically add an onclick handler instead of embedding the script inside the href attribute.

我直接回答了原始问题,解决方案需要花费最少的精力。正如在其他一些答案中提到的那样,我个人会将我的标记和JavaScript分开并动态添加一个onclick处理程序,而不是将脚本嵌入到href属性中。

#3

Tried moving what's in href to onclick. In general, you should avoid JavaScript code in the href attribute.

尝试将href中的内容移动到onclick上。通常,您应该避免在href属性中使用JavaScript代码。

#4

Use:

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

Although you will need to do something on the server so that when you get a reference to the comment_form element via a request, the default is for it to be visible. This will allow (this part of) your page to work without JavaScript enabled.

虽然您需要在服务器上执行某些操作,以便在通过请求获得对comment_form元素的引用时,默认情况下它是可见的。这将允许(此部分)您的页面在未启用JavaScript的情况下工作。

#1