jquery动态添加表单字段问题答案

【问题标题】：Jquery dynamic addition of form fields problemjquery动态添加表单字段问题
【发布时间】：2009-06-02 08:17:45
【问题描述】：

我正在使用以下代码插入额外的表单字段。

function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}

当模糊事件发生时，我将字段值动态发送到 mysql。但是，当插入此字段时，它无法识别，并且当在新字段上输入任何值时，模糊事件也不会发生。这是因为在文档就绪时设置了原始模糊事件处理程序吗？

如何让 mysql update jquery 代码识别在文档就绪初始化完成后额外的表单字段何时可见？我已经尝试了基于 div id 的各种事件，但无济于事.....

【问题讨论】：

标签： javascript jquery forms dynamic

【解决方案1】：

您的代码不适用于动态添加的输入的原因是当您执行以下操作时：

$(selector).blur(myFunction);

jQuery 遍历每个与selector 匹配的元素此时并添加一个事件处理程序，当该元素上发生blur 事件时运行myFunction。这意味着任何匹配selector 的元素添加之后这行代码运行将不会被绑定。

为了解决这个问题，jQuery 在 1.3 中引入了 live 函数。正如文档所述：

将处理程序绑定到所有当前和未来匹配元素的事件（如点击）。也可以绑定自定义事件。

不幸的是，截至目前，jQuery 不支持带有 live 函数的 blur 事件。

那么你的选择是：

A) 每次添加新输入时运行绑定代码。
B) 使用livequery 插件，这是live 基于并且支持模糊。

就个人而言，我会选择 A。

【讨论】：

【解决方案2】：

你应该使用 live() 方法绑定你的事件：

例如：

$("input").live("blur", function() { ... });

这样，在运行时添加的任何字段都将绑定到事件处理程序。

编辑：正如 cmets 中所指出的，“模糊”不受支持，但有一个插件支持此事件：http://plugins.jquery.com/project/livequery

【讨论】：