如何使用jquery从动态生成的表单元素中获取元素Id？

Question

为了尝试这个概念，我正在做一个非常简单的测试。

我得到了一个表格，其中从一开始就显示了一些文本输入。 当我单击某个字段时，我想捕获其 Id，并向输入文本添加一个值。

$(document).ready(function() {
    $('input').focus(function() {
        var currentId = $(this).attr('id');
       $("#"+currentId).val('blah');
    });
});

这对于初始字段效果很好，但对于使用 ajax 调用添加的字段则停止工作。

诀窍是，用户可以单击任何字段，但在他们单击之前我不知道是哪个字段。 我的 ID 如下所示：

experience0-CompanyName //(original one)
experience[n]-CompanyName

（[n] 部分还用于对表单中的字段进行排序，因为元素按经验、教育技能等进行分组......

我怎样才能实现这一点？

Answer 1

一个简单的更改：

$(document).ready(function() {
    $('input').live("focus", function() {
        var currentId = $(this).attr('id');
       $("#"+currentId).val('blah');
    });
});

.focus 仅绑定到调用时存在的元素。 .live() 将函数绑定到所有现有元素以及以后添加到 DOM 的任何元素的事件。

Answer 2

以前的答案已经不再合适。他们依赖于 jQuery.live，但现已弃用。在 jQuery 1.11 中，调用 jQuery.live 会产生错误。当前的首选解决方案是使用 jQuery.on 。上面的 jQuery.live 代码的实现如下。第二个参数当前设置为“:input”，可以替换为符合您需要的选择器。

$( "body" ).on('focus', ":input", function() {
    var currentId = $(this).attr('id');
    $("#"+currentId).val('blah');
});

Answer 3

它可以更简单（不需要获取 id 并通过它进行搜索）：

$(document).ready(function() {
    $('input').live('focus', function() {
        $(this).val('blah');
    });
});

Answer 4

我相信您正在使用 $("").focus()。这适用于已加载的文档，不适用于添加的新标签。

尝试使用 $("").live("focus",);

另外请查看 jquery 网站。他们得到了非常好的文档和示例。对于实时查看http://api.jquery.com/live/