contentEditable div 中的 Span 標簽需要按鍵事件

Question

我的 html 代碼中有以下 div：

<div id="expanderInput" tabIndex="1" contentEditable></div>

我使用contentEditable div 作為制作自動擴展文本框的簡單、跨瀏覽器方法。 我也在對用戶輸入到這個 div 的內容進行輸入驗證。 它應該是由逗號分隔的電子郵件地址列表。 當用戶嘗試提交不正確的信息時，我的 Javascript 將輸入分塊並以紅色突出顯示所有不正確的塊。

//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);

//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
    var current = chunks[invalids[i]];
    current = '<span class="highlighted">' + current + '</span>';
    chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();

數組 'invalids' 包含所有壞塊的索引。 到目前為止一切正常。 但是一旦用戶開始在紅色文本中輸入，我需要紅色消失，但只是在那個范圍內。 例如，如果有兩個壞塊，每個都用紅色突出顯示，用戶開始修復一個，另一個需要保持紅色。

我嘗試將事件偵聽器附加到跨度：

initHighlighted = function()
{
    $(".highlighted").keypress(function()
    {
        alert("It works!");
    });
};

但是該事件永遠不會發生，即使用戶編輯紅色文本也是如此。 使用瀏覽器的開發人員工具，我可以看到事件處理程序就在那里，只是永遠不會被觸發。 是 div 上的contentEditable屬性導致跨度接收事件嗎？ 我也試過讓跨度本身contentEditable ，但行為仍然相同。

Answer 1

除非我弄錯了，否則這應該可以解決您的問題：

initHighlighted = function()
{
    $(".highlighted").live("keypress",function()
    {
        alert("It works!");
    });
};

因為您的跨度是在 DOM 初始加載后添加的，所以沒有附加按鍵事件偵聽器，因為沒有任何東西可以附加它們。 Jquery 的live會通過將這些偵聽器附加到任何帶有“突出顯示”類的內容（無論何時將它們添加到 DOM 中）來為您解決這個問題。

閱讀 Jquery 站點上的文檔以獲得比我能給你的更好的解釋： http : //api.jquery.com/live/

編輯：我很抱歉沒有正確閱讀您的問題並意識到您在添加“突出顯示”跨度后附加了按鍵偵聽器。

你有沒有讀過這個：

contenteditable div中子元素的鍵盤事件？