jQuery模糊事件多次使用動態內容編輯

Question

當我點擊某個類的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/

Answer 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'); 
}); 

由於小提琴已經使用jQuery 1.7.x，我繼續和換出.delegate()越漲最新.on()。滑入其他一些東西，如緩存$(this)，並沒有打擾通過事件進入函數，因爲沒有什麼我們需要preventDefault()或stopPropagation()上。