使用动态内容编辑多次触发 jQuery 模糊事件答案

【问题标题】：jQuery blur event fireing multiple times with dynamic content edit使用动态内容编辑多次触发 jQuery 模糊事件
【发布时间】：2011-11-26 06:26:24
【问题描述】：

当我单击某个类的 div 元素时，我将 contenteditable 更改为 true。 onblur 的那个点击的 div 我希望它提醒一些东西。我第一次模糊 div 时，它工作正常，但之后它两次显示相同的警报。所以第一次，它会发出一次警报。第二次，它会发出两次警报，依此类推。

我做错了什么？

content = $('#content');

content.delegate('div', 'click', function(event){
    $(this).attr('contenteditable', 'true');
    $(this).focus();
    $(this).bind('blur', function(){
        alert('blur');
    });
});

示例：http://jsfiddle.net/W8que/4/

【问题讨论】：

标签： javascript jquery contenteditable onblur

【解决方案1】：

您在每次点击时再次绑定模糊。每个绑定都是新的，并且它们正在堆叠。也可以将.delegate()（或.on()）用于模糊功能。

小提琴：http://jsfiddle.net/W8que/11/

代码：

content = $('#content');

content.on('click', 'div', function(){
    $this = $(this);
    $this.attr('contenteditable', 'true');
    $this.focus();
});

content.on('blur', 'div', function(){
  alert('blur');
});

因为 fiddle 已经在使用 jQuery 1.7.x，所以我将.delegate() 换成了更新的.on()。加入了一些其他的东西，比如缓存 $(this) 并且没有费心将事件传递给函数，因为我们不需要打开 preventDefault() 或 stopPropagation()。

【讨论】：

【解决方案2】：

为了防止调用多次模糊，您可以在“on”之前使用“off” 例如：

  $inputs.off().on("blur", function() {
       
    })

【讨论】：