如何模糊中的內容編輯

Question

我有一個內容編輯專區內一個簡單的表像這樣一個表格單元格：

<div contenteditable="true"> 
    <table class="rwd-table" width="100%"> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
    </table> 
</div> 

當您單擊的單元格，我使用jQuery到ID添加到該小區。該ID已應用CSS來突出顯示它。

$(document).on('click', 'td, th', function (event) { 
    // remove previous highlighted cell 
    $('#selectedCell').removeAttr('id'); 
    // highlight new cell 
    $(this).attr('id', 'selectedCell'); 
}); 

當突出顯示的單元格失去焦點時，應該刪除該ID。這是我的問題。

// DOES NOT WORK :( // 
$(document).on('blur', '#selectedCell', function (event) { 
    $('#selectedCell').removeAttr('id'); 
}); 

我假設這是因爲表單元格通常不會有焦點/模糊事件。

有沒有辦法檢測contenteditable中表格單元格上的模糊？

這是一個活生生的例子：http://jsfiddle.net/5c7br6zc/

Answer 1

是的，模糊事件的問題。而不是依靠它的嘗試點擊事件上document結合並阻止它的情況下，如果起泡發生在TD點擊：

$(document).on('click', 'td, th', function (event) { 
    $('#selectedCell').removeAttr('id'); 
    $(this).attr('id', 'selectedCell'); 
    event.stopPropagation(); 
}); 

$(document).on('click', function (event) { 
    $('#selectedCell').removeAttr('id'); 
}); 

演示：http://jsfiddle.net/5c7br6zc/1/