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

Question

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.

$(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.

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:

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...

how can I achieve this?

Andrew Cooper · Accepted Answer · 2011-05-24 06:20:58Z

5

A simple change:

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

.focus only 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.

answered May 24, 2011 at 6:20

Andrew Cooper

32.7k5 gold badges86 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas de Fontenay Over a year ago

As explained in this document, live() doest not work with some events. Changing to 'click' instead fixed it. (almost the same event) I choose this answer as a solution because it was there first and I do need to get the currentId for later use. Thanks everyone for your help. You've set me in the right track.

Dale K · Accepted Answer · 2019-01-31 03:32:32Z

3

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.

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

edited Jan 31, 2019 at 3:32

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Jun 9, 2014 at 15:36

bittids

1802 silver badges6 bronze badges

Comments

bjornd · Accepted Answer · 2011-05-24 06:22:04Z

1

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

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

answered May 24, 2011 at 6:22

bjornd

23k4 gold badges59 silver badges74 bronze badges

1 Comment

Nicolas de Fontenay Over a year ago

> Hi thanks for the answer, but I just tried it along with the variant below with no success.

Mayank · Accepted Answer · 2011-05-24 06:20:48Z

0

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

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/

answered May 24, 2011 at 6:20

Mayank

5,8289 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related