javascript - jQuery 模糊事件通过动态内容编辑多次触发

Question

当我单击某个类的 div 元素时，我将 contenteditable 更改为 true。所单击的 div 的 onblur 我希望它能发出警报。第一次模糊 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/

Answer 1

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

fiddle :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()上。