我对这段代码的结果感到困惑。在我看来,当$("#title")
的内容是"hello“并得到单击时,它执行函数saygoodbye()
并添加一个新的单击事件匿名函数。它会发出外部警报。当内容是“再见”并点击时,这两个函数都应该执行。它应该得到一个外部警报和一个内部警报。
但实际上,我得到了一个外部警报和两个内部警报。另一个内部警报从哪里来?
var count = 0;
function saygoodbye(){
alert("ok is outer");
$("#title").html("goodbye");
$("#title").click(function() {
alert("ok is inner");
$('#title').html("hello");
$('#title').off("click");
});
}
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<h1 id="title" onclick="saygoodbye();">hello</h1>
发布于 2016-01-23 06:42:13
当您调用.click()
时,您总是要添加一个新的处理程序;以前添加的处理程序不会被删除。当您调用.off()
时,它们将被删除,但这在两个处理程序已经附加之后才会发生。库(jQuery )维护处理程序列表,并使用自己的内部事件处理程序从浏览器实际处理事件。因此,即使只有两个真正的“单击”事件,当调用jQuery处理程序时,有两个jQuery注册的处理程序供库调用。
通常,在其他事件处理程序中添加事件处理程序是一种值得怀疑的方法。这并不是完全错误的,但它增加了复杂性。在这里,在此之上,您使用了两种不同的技术来注册事件处理程序。“送别”函数附加到DOM元素的"onclick“属性。然而,jQuery代码使用DOM attachEventHandler()
注册处理程序。这两种机制是分开的。当发生“单击”时,浏览器将首先检查"onclick“属性,然后调用通过API注册的任何处理程序。
发布于 2016-01-23 07:17:38
这是因为事件是从DOM注册的。动态注册它,然后它工作。
从标记中删除onclick
属性。
var count = 0;
$('#title').click(saygoodbye);
function saygoodbye(){
alert("ok is outer");
$("#title").html("goodbye");
$("#title").click(function() {
alert("ok is inner");
$('#title').html("hello");
$('#title').off("click");
});
}
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<h1 id="title">hello</h1>
阅读这样的线程,了解为什么要在执行过程中注册事件(就您的情况而言)。jQuery.click() vs onClick
编辑:
首先,为了解除通过元素属性触发的事件的绑定,我们需要使用
document.getElementById("title").onclick = null;
其次,jQuery的.off()函数将只解除jQuery的.on()
添加的处理程序
.on()
的事件处理程序”.click()
-是.on()
的一种速记方法。所以说再见()并没有逃脱,这是调试。
点击标题。(有标题你好)
单击标题(有标题再见)
.off()
函数在这里工作,并杀死额外添加的2个处理程序。希望这个故障能帮上忙。
https://stackoverflow.com/questions/34964755
复制相似问题