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

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 定位动态内容 - 初始选择器是绑定(bind)处理程序时出现的容器:

$("#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');
});

fiddle :http://jsfiddle.net/beso9sau