通过 jQuery 动态添加输入，但是所有 jQuery 输入都不接收焦点样式？答案

【问题标题】：Dynamically add input via jQuery, however all jQuery inputs do not receive focus styling?通过 jQuery 动态添加输入，但是所有 jQuery 输入都不接收焦点样式？
【发布时间】：2012-02-07 06:00:03
【问题描述】：

当用户单击附加了 jQuery 单击事件的锚标记时，我正在向表单动态添加输入。

$(".add-input").click(function () {

  $("div.form-item").append(get_input());

});

上面的函数成功地向表单添加了新的输入，但是我有另一个 jQuery 函数，它可以像这样为当前聚焦的输入添加样式：

$("input, textarea").focus(function () {
  $(this).parent().addClass("cur-focus");
});

此函数非常适用于原始表单之外的输入，但是所有动态添加的输入都没有上述事件处理程序添加的类。

这两个事件处理程序都在 $(document).ready 函数中。

有没有办法让动态添加的输入也绑定到我的输入焦点事件处理程序？

【问题讨论】：

标签： jquery

【解决方案1】：

是的，使用 jQuery 的 .on() 或 .live() 功能。这两者都会在创建时自动附加匹配的元素。

【讨论】：

【解决方案2】：

使用on 或delegate 试试这个。

使用onjQuery 1.7+

$("form").on("focus", "input, textarea",function () {
     $(this).parent().addClass("cur-focus");
});

对旧版本使用delegate

$("form").delegate("input, textarea", "focus", function () {
     $(this).parent().addClass("cur-focus");
});

【讨论】：

我使用的是 jQuery 1.7+，这个解决方案效果很好。谢谢！

【解决方案3】：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on版本：

$("body").on('focus','input, textarea', function () {
  $(this).parent().addClass("cur-focus");
});

为了获得更好的性能而不是body，您应该给出包含所有input 和textarea 的最接近的元素

【讨论】：

【解决方案4】：

尝试添加事件处理程序。

http://api.jquery.com/bind/

【讨论】：