Question

我在页面上有一个textarea和一个按钮：

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

如果用户单击“添加”按钮而未在textarea字段中输入文本，则会显示一条消息并在textarea字段周围添加红色边框。我正在尝试做的是当用户开始在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

来自demo的html

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

来自demo

的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

将边框设置为空值将不起作用。您需要将其设置为“无”或其他值。

在用户输入上删除textarea周围的红色边框（加载ajax）

2 个答案: