удалить красную рамку вокруг текстового поля ввода пользователя (Аякс нагруженного)

Question

У меня есть текстовое поле и кнопка на странице, как это:

<div id="add_comment_container"> 
    <textarea id="comment_field" rows="4" cols="40"></textarea> 
    <button id="add_comment">Add</button> 
</div> 

Если пользователь нажимает на кнопке Add без ввода текста в поле TEXTAREA , Я показываю сообщение и добавляю красную рамку вокруг поля textarea. То, что я пытаюсь сделать, это удалить эту границу, когда пользователь начнет вводить текст в текстовое поле. Проблема в том, что текстовое поле и кнопка загружаются через ajax (поэтому они добавляются позже в DOM).

Я пытался использовать .delegate функцию(), как это, но событие KeyUp даже не выполняется:

$('#add_comment_container').delegate('#comment_field', 'keyup', function(){ 
    $(this).css('border', ''); 
}); 

Любая помощь, пожалуйста ??

Answer 1

jsFiddle demo

Есть две проблемы. Вы делегируете несуществующий элемент. Используйте «тело». Кроме того, вам нужно установить другой стиль CSS, чтобы удалить границу фокуса, а именно: outline to 0px

HTML из демо

<div id="main"></div> 

Js из демо

var response = '<div id="add_comment_container"><textarea id="comment_field" rows="4" cols="40"></textarea><button id="add_comment">Add</button></div>'; 
$("body").delegate('#comment_field', 'keyup', function(){ 
$(this).css('outline', '0px'); 
}); 
setTimeout(function(){ 
    $('#main').html(response); 
},1000); 

Answer 2

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