jQuery focusout 事件重复自身问题答案

【问题标题】：jQuery focusout event repeating itself issuejQuery focusout 事件重复自身问题
【发布时间】：2012-03-17 22:02:26
【问题描述】：

这个东西有效，但是每次我点击我想要获取的元素时，它都会“计算”点击次数，然后打印日志 cmets 以获得相同的总点击次数。

例如，如果我连续单击该元素 3 次（然后单击外部以触发 focusout），它会打印 3 个日志 cmets，如果我再单击 2 次（然后再次单击外部）它会打印 5 logcmets.

我希望每次在元素外部单击时只获得一条log 评论。

帮助任何人？

 $("#main-wrapper").click(function (e) {
    var contenteditable = $(e.target).attr('contenteditable');
    if (contenteditable == 'true') {
        $(e.target).focusout(function() {
            var content = $(this).html();
            console.log("get: " + content);
        });
    };          
});

【问题讨论】：

标签： jquery focus jquery-events

【解决方案1】：

尝试解除绑定事件。

$("#main-wrapper").click(function (e) {
var contenteditable = $(e.target).attr('contenteditable');
if (contenteditable == 'true') {
    $(e.target).unbind('focusout').focusout(function() {
        var content = $(this).html();
        console.log("get: " + content);
    });
};          
});

【讨论】：

除非我弄错了，否则这也会解除click 处理程序的绑定，所以这只适用于第一次点击。不过，您应该可以使用unbind('focusout')。

【解决方案2】：

每次处理click 时，都会附加一个新的focusout 事件处理程序。这些事件处理程序不是替换，而是添加，每个事件处理程序在事件触发时执行。这就是为什么您会收到与之前的点击相同数量的记录消息。

您应该能够只指定一次focusout 处理程序，但您希望它如何被触发当然取决于您要完成的任务。

$("#main-wrapper").focusout(function (e) {
  var contenteditable = $(e.target).attr('contenteditable');
  if (contenteditable == 'true') {
    var content = $(this).html();
    console.log("get: " + content);
  }          
});

【讨论】：