使用 jQuery 添加内联 onclick 事件

Question

这个问题实际上与How to remove "onclick" with JQuery?有关。

<div onclick="doSomething();">Click me</div>

根据参考文章，为 jQuery 1.7+ 删除此内联事件的正确方法是：

// There's only one div in this example
$( "div" ).prop( "onclick", null ).off( "click" );

假设我想稍后添加一个内联 onclick 事件。我尝试使用 prop 添加事件，但没有成功。但是，使用 attr 添加所述事件确实有效。

// Does not add event
$( "div" ).prop( "onclick", "doSomething();" ).on( "click ");

// Neither does this
 $( "div" ).prop( "onclick", "doSomething();" );

// This one works
$( "div" ).attr( "onclick", "doSomething();" );

// This one works, too
$( "div" ).attr( "onclick", "doSomething();" ).on( "click" );

有人能解释一下吗？

对于删除内联事件，当前推荐的 jQuery 1.7+ 方法是 prop。然而，对于 adding 内联事件，prop 似乎没有响应。 prop 是否应该用于添加内联事件，或者我们只使用 attr 来达到这个目的？ 这看起来不一致，如果为真：使用 [=14= 删除] 但加上 attr。

提前感谢您的帮助。

Answer 1

我假设你的问题只是出于兴趣，而不是因为你有问题。因为如果您在绑定点击事件时遇到问题，您应该只使用 jQuery 的 click()。所以回答你的问题，我认为不同之处在于：

$( "div" ).prop( "onclick", null ).off( "click" );

不会从 DOM 的属性中删除 onclick=""，而只是禁用单击事件的 'back-end' 处理程序，如果您明白我的意思的话。源代码仍会显示 onclick=""（该属性仍会存在），但点击事件与 "" 之间的任何内容的实际绑定已损坏。

使用 removeAttr() 或 attr('onclick','')，onclick 属性实际上已从 source/HTML/DOM 中完全删除（并且不能再重新启用，除非再次添加该属性）。

从逻辑上讲，您可以通过添加 onclick 属性将某些内容添加回 source/HTML，如下所示：attr('onclick','doSometing();'。这仍然需要激活（使用 bind(click) 或 click()），因为该元素已经在 DOM 中。但是，您不能使用 prop("onclick","doSometing();") 激活 onclick，因为这首先需要该属性。

简而言之：您可以使用 prop 禁用（不是删除，而是禁用）内联 onclick，但如果它不存在，则不能启用它。

此外，一般情况下，不要添加内联 onclick 属性，如果可以，根本不要使用它们:)

使用 jQuery 添加内联 onclick 事件

Adding inline onclick event with jQuery

javascript

jquery

events

inline

onclick