Question

我有一个HTML表单，当我点击一个按钮时会生成另一个字段。问题是动态创建的输入字段没有样式化。

这是我的HTML表单：

<form id="form">
    <input type="text" id="enter"/><br>
</form>
<button id="add_field" class="button"">Add button</button>

我的jQuery生成一个新字段（它可以工作）：

$('#add_field').click(function(){
    $('#form').append("<input type='text' id='enter2' />");
});

以下是单击时应更改所有文本字段样式的代码：

$('input:text').focusin(function (){
    $(this).css('background-color', '#E3F3FF').css('border', '1px solid #0085F0');
});

$('input:text').blur(function (){
    $(this).css('background-color', '#fff').css('border', '1px solid black');
});

它适用于我在HTML代码中输入的所有字段，而不是动态生成的字段。

Answer 1

使用.on定位动态内容 - 初始选择器是处理程序绑定时存在的容器：

$("#form").on("focusin", "input:text", function (){
    $(this).css('background-color', '#E3F3FF').css('border', '1px solid #0085F0');
});

$("#form").on("blur", 'input:text', function (){
    $(this).css('background-color', '#fff').css('border', '1px solid black');
});

小提琴：http://jsfiddle.net/beso9sau

Answer 2

我认为这就是你要找的东西：

http://learn.jquery.com/events/event-delegation/

“事件委托允许我们将单个事件侦听器附加到父元素，该元素将触发与选择器匹配的所有后代，无论这些后代现在是还是将来添加“的

动态生成的输入字段不受.click和.blur jquery css更改的影响

2 个答案: