Span тег внутри contentEditable DIV нуждается событие

Question

нажатия

У меня есть следующий Div в моем HTML коде:

<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(); 

В массиве «инвалиды» ​​содержатся индексы всех плохих кусков. Все до этого момента отлично работает. Но как только пользователь начнет печатать внутри красного текста, мне нужно, чтобы красный исчез, но только в этом промежутке. Например, если есть два плохих куска, каждый из которых выделен красным цветом, и пользователь начинает фиксировать один, другой должен оставаться красным.

Я попытался прикрепление слушателя событий для пролетов:

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

Но событие никогда не бывает, даже когда пользователь редактирует текст в красном цвете. Используя инструменты разработчика браузера, я вижу, что обработчик событий есть, он никогда не запускается. Является ли атрибут contentEditable на div, заставляя промежуток получать событие? Я также пробовал сделать сами объекты contentEditable, но поведение по-прежнему остается прежним.

Answer 1

Если я не ошибаюсь, это должно решить вашу проблему:

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

Поскольку ваши пролеты будут добавлены после первоначальной загрузки DOM не прикрепленной нажатие клавиши слушатели событий как не было ничего, чтобы прикрепить их к. JQuery live сортирует это для вас, присоединяя тех слушателей, в этом случае, что-либо с выделенным классом, независимо от того, когда они добавляются в DOM.

Прочитайте документацию на сайте Jquery, чтобы получить гораздо лучшее объяснение, чем я мог бы дать вам: http://api.jquery.com/live/

EDIT: Мои извинения за не читать ваш вопрос правильно, и понимая, что ваш были крепление нажатия слушателя после после того, как Добавлены «выделенные» промежутки.

Вы читали это, хотя:

Keyboard events for child elements in a contenteditable div?