jQuery 如何使用jquery从动态生成的表单元素中获取元素ID?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6106443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 20:24:00  来源:igfitidea点击:

How to get element Id from dynamically generated form elements with jquery?

jquerydynamic-forms

提问by Nicolas de Fontenay

To try the concept, I'm doing a very simple test.

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

I got a form with some text input showing up from the start. When I click on a field, I want to capture its Id, and add a value to the input text.

我得到了一个从一开始就显示一些文本输入的表单。当我点击一个字段时,我想捕获它的 Id,并向输入文本添加一个值。

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

This works great with the initial fields, but it stops working with the fields added using ajax calls.

这对初始字段很有效,但它停止处理使用 ajax 调用添加的字段。

The trick is, users are able to click on any field and I don't know which until they click. My Ids looks like this:

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

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

(the [n] part is also used to order the fields in the form as elements are grouped by experience, education skills etc...

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

how can I achieve this?

我怎样才能做到这一点?

回答by Andrew Cooper

A simple change:

一个简单的改变:

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

.focusonly binds to elements that exist at the time it's called. .live()binds a function to an event for all existing elements, and any that are added to the DOM later.

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

回答by bittids

The previous answers are no longer appropriate. They rely on jQuery.live, which is now deprecated. In jQuery 1.11, a call to jQuery.live produces an error. The current preferred solution is to use jQuery.on . The implementation of the jQuery.live code, above, would be as follows. The second parameter, currently set to ":input", can be replaced by a selector that conforms to your needs.

以前的答案不再合适。他们依赖于 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');
});

回答by bjornd

It can be simpler (no need to get id and search by it):

它可以更简单(无需获取 id 并通过它搜索):

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

回答by Mayank

I belive you are using $("<someid>").focus(<function>). This works on document already loaded and not on new tags added.

我相信你正在使用$("<someid>").focus(<function>). 这适用于已加载的文档,而不适用于添加的新标签。

Try using $("<someid>").live("focus", <function>);

Try using $("<someid>").live("focus", <function>);

Also do have a look at jquery website. They got quite nice documentation with examples. For live check this out http://api.jquery.com/live/

也看看 jquery 网站。他们得到了很好的带有示例的文档。对于现场检查这个http://api.jquery.com/live/