jQuery 设置 onclick 属性仅适用于 FireFox？答案

【问题标题】：jQuery setting onclick attribute working only on FireFox?jQuery 设置 onclick 属性仅适用于 FireFox？
【发布时间】：2010-05-13 09:09:19
【问题描述】：

我正在尝试设置使用 jQuery 生成的链接的“onclick”属性。

虽然其他属性可以正常工作（例如 href，但也可以使用其他自定义属性），但设置“onclick”似乎只在 FireFox 中有效。在其他浏览器上，该属性会被忽略。

有什么提示吗？这种行为正确吗？为什么？

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(function(){
    var obj = $('<a/>');
    obj.html('click me');
    obj.attr({'href':'#test', 'onclick':'alert("o hai"); return false;'});
    $('body').append(obj);
  });
</script>
</head><body /></html>

编辑：我知道 .click() jQuery 方法；但这不是重点，我只是想设置属性并且无法弄清楚为什么它不像其他任何 attr 那样工作。

【问题讨论】：

标签： jquery firefox onclick

【解决方案1】：

这种行为正确吗？

attr('onsomeevent', ...) 从来都不是添加事件侦听器的方式，从来没有得到支持，并且由于巧合只能在 Firefox 上运行，是的。

为什么？

因为 8 版之前的 IE 不能直接获取/设置 HTML 属性。调用setAttribute() 只会设置一个同名的DOM 属性。 onclick 属性不是字符串属性，因此您不能向其写入字符串。它只接受一个函数值。

jQuery 的 attr() 被称为 attr 但实际上写入 DOM 属性而不是 HTML 属性...但使用 HTML 属性名称（例如 class）而不是 DOM 属性名称（例如 @ 987654327@).

(除非它没有，因为在某些情况下它试图通过使用属性来隐藏差异。除了仍然不起作用 IE 出于上述原因。这不是 jQuery 最自豪的时刻之一。）

无论如何，一般来说，在字符串中包含 JavaScript 是一种代码味道。一般来说，jQuery 和现代 JavaScript 的最佳前进方式是使用函数对象（可能是内联 function() { ... } 表达式）。

【讨论】：

不是答案，即使在 Google Chrome 上也存在问题，我并没有尝试设置事件处理程序，只是设置 DOM 属性。还是谢谢你。
正如我所说，attr() 设置了一个 DOM 属性。跟说element.onclick= 'alert()';一模一样，显然是无效的。事件处理程序属性需要一个函数值，而不是字符串。
那么谢谢。我虽然 DOM 属性可以包含任何对象类型，但如果不是“函数”类型，则在作为事件处理程序调用时最终会失败。
@Patonza：这是一个答案，只是显然不是你想听到的答案。事实上，这是这里唯一直接针对您的具体问题的答案，is this behaviour correct? 和And why?。 @bobince：+1 详细介绍了 attr 的细节，我懒得去 ;-)
是的，这是一个答案。我不明白“onclick 属性不是字符串属性”的概念。我认为 javascript 对象属性可以接受任何对象类型。现在我知道 DOM 是强类型的。再次感谢您的澄清:)

【解决方案2】：

试试 jQuery 方式....

<script type="text/javascript">
  jQuery(function(){
    var obj = $('<a/>');
    obj.html('click me')
       .attr('href','#test')
       .click(function() {
            alert("o hai");
            return false;
        })
    $('body').append(obj);
  });
</script>

编辑：尝试将 onclick 更改为 onClick，注意大写“C”

jQuery(function(){
    var obj = $('<a/>');
    obj.html('click me');
    obj.attr({'href':'#test', 'onClick':'alert("o hai"); return false;'});
    $('body').append(obj);
  });

【讨论】：

我知道“jQuery 方式”。我需要设置属性，但我不知道为什么它不起作用。
使用带有大写 C 的“onClick”确实适用于 FF 和 Chrome。谢谢你。然而，相当奇怪的是，Chrome DOM 检查器显示一个带有小写“c”的属性。无论如何它仍然在 IE 上坏了，但这可能是另一个问题。
所有事件处理程序属性都明确地仅小写作为 DOM 属性。将onClick 传递给 jQuery 只会使其在更多浏览器中工作，因为它回避了内部优化，其中 jQuery 直接设置现有属性而不是使用 setAttribute（参见 jQuery 1.4.2 第 1486 行），在非不区分大小写的情况下-XHTML HTML。它仍然无法在 IE 中运行，无论如何也不可取。