问单击事件函数执行两次

EN

1. 当你第一次点击，“说再见”运行，发布“外部”警报，并建立一个点击处理程序。
2. 第二次点击，“说再见”再次运行，张贴“外部”，并建立又一个点击手。
3. 该“单击”事件随后由jQuery处理，此时，该事件有两个“单击”处理程序来调用。

当您调用.click()时，您总是要添加一个新的处理程序；以前添加的处理程序不会被删除。当您调用.off()时，它们将被删除，但这在两个处理程序已经附加之后才会发生。库(jQuery )维护处理程序列表，并使用自己的内部事件处理程序从浏览器实际处理事件。因此，即使只有两个真正的“单击”事件，当调用jQuery处理程序时，有两个jQuery注册的处理程序供库调用。

通常，在其他事件处理程序中添加事件处理程序是一种值得怀疑的方法。这并不是完全错误的，但它增加了复杂性。在这里，在此之上，您使用了两种不同的技术来注册事件处理程序。“送别”函数附加到DOM元素的"onclick“属性。然而，jQuery代码使用DOM attachEventHandler()注册处理程序。这两种机制是分开的。当发生“单击”时，浏览器将首先检查"onclick“属性，然后调用通过API注册的任何处理程序。

这是因为事件是从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()添加的处理程序

http://api.jquery.com/off/文档

• “.off()方法移除附加于.on()的事件处理程序”
• .click() -是.on()的一种速记方法。

所以说再见()并没有逃脱，这是调试。

点击标题。(有标题你好)

1. 称再见功能警报为“外部”；
2. 将html更改为“再见”分配
3. 标题的新匿名处理程序(单击事件)。

单击标题(有标题再见)

1. 叫再见函数
2. 警告“外部”；
3. 将html更改为“再见”(是的，它又变了)
4. 将另一个事件匿名处理程序分配给title (参见附加的另一个处理程序)
5. 呼叫匿名处理程序1
6. 警惕“内在”
7. 尽管在此阶段(指定了.off()函数)。这将只在触发所有事件时执行)；
8. 呼叫匿名处理程序2
9. 警惕“内在”
10. .off()函数在这里工作，并杀死额外添加的2个处理程序。

希望这个故障能帮上忙。