How to make jQuery get the .val() of a newly created element?

Question

What I am trying to do:

Get the value of each of these newly created <input>'s using jQuery.

This is the affected portion of my HTML Code:

<ul class="full_form_ul">
        <li class="full_form_ul_li" id="the_step_li">

                <button class="button" id="test_button">+[Test]</button>
                <button class="button" id="step_creation_button">+[Step]</button>

        </li> <!-- \\#the_step_li -->
</ul> <!-- \\.full_form_ul -->

This is the jQuery code that is working:

$("#step_creation_button").click(function(event)
{   
        event.preventDefault();
        $('#the_step_li').append('<div class="step_div"><input type="text" class="step_input"><button class="the_sub_step_button" type="button" title="button">+[Sub]</button></div>');

});

$('#the_step_li').on('click', "button", function(event) 
{

    event.preventDefault(); 
    $(this).parent('.step_div').append('<div class="sub_step_div"><input type="text" class="sub_step_input"></div>');

});

The non-working jQuery code:

$("#test_button").on('click', function(event) 
{

    event.preventDefault();

    $(".step_div").each(function()
    {   


        alert($(this).next('.step_input').val());
        // ^ updated according to @Jeremy T's excellent response into...
        //alert($(this).children('.sub_step_input').val());


        $(this).children('.sub_step_div').each(function()
        {
            alert($(this).next('.sub_step_input').val());
            // same change from .next into .children here as well I would assume, though it doesn't work in this instance.  
        });

    }); // \\.step_div.each 

    //@EH_warch supplied a wonderful working solution for the initial problem as well
    //$("#the_step_li > .step_div > .step_input").each(function()
    //{
        //alert($(this).val());
    //})

}); // \\#test_button.on('click')

Related (but different) questions:

score 2 · Accepted Answer · answered Jul 13 '12 at 20:43

2

Everything looks good, except for your selector $(this).next('.step_input')

If you want to find the input inside this, then you need to use $(this).children('.step_input')

Working jsFiddle: http://jsfiddle.net/rKnDF/

answered Jul 13 '12 at 20:43

Jeremy T

1,273
1
10
14

Thank you Jeremy T! I would +1 you if I had the reputation now, however I do not, so when I acquire it I will be sure to come back and do so. I updated the question according to your response, any thoughts on the updated content? – Teainahat Jul 13 '12 at 21:05
It is now accepted :) Since @Jeremy_T fixed the problem initially outlined, this now has an accepted answer, and another problem lies in the content that was not there at that time (because of problems detailed in my response to EH_warch), should I re-work my problem and make it into a new question? – Teainahat Jul 13 '12 at 21:35

KoU_warch · Answer 2 · 2012-07-14T00:20:48.690

0

Sorry i got confused with your title, i don't think it has anything to do with newly appened elements.

you could replace this

$(".step_div").each(function()
{   
    alert($(this).next('.step_input').val());
});

for

$("#the_step_li > .step_div > .step_input").each(function(){
    alert($(this).val());
})

Update

According to your new request the best thing you can do is add a display class to the elements you wish to show, and you can get the class of that element to perform any business login.

$("#the_step_li .display").each(function(){
    alert($(this).val() + 'and my class is: ' + $(this).attr('class'));
})

example

edited Jul 14 '12 at 00:20

answered Jul 13 '12 at 20:34

KoU_warch

2,160
1
25
46

According to [jQuery.com/delegate](http://api.jquery.com/delegate/) "As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods: `$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+`" – Teainahat Jul 13 '12 at 20:37
@Teainahat the problem has nothing to do with new appended elements, thats why i got confused. You have at least two working solutions in this post. – KoU_warch Jul 13 '12 at 20:57
All good, sorry my title didn't reflect my post accurately enough. That does indeed work, you both answered with working solutions, a +1 for you as well when my reputation allows, thank you! I updated the post according to the responses and with additional content that was not included when I re-typed the question after failing the captcha and starting from a saved draft. Do you have any thoughts on the updated question @EH_warch? – Teainahat Jul 13 '12 at 21:16

score 0 · Answer 3 · answered Jul 13 '12 at 20:35

0

The elements are only bound on doc ready and your new element is created after that. You'll need to use something like .live() or .delegate() to attach events on dynamically created objects.

Here's a really good explanation about the differences.

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

answered Jul 13 '12 at 20:35

Jerry

1,775
4
22
40

I provided the link to [jQuery.On()](http://api.jquery.com/on/) so it could be utilized. Though your link does explain the difference, and has a picture to depict the DOM, it is outdated; see my reply to the first comment on this question. Thank you for the quick reply however. – Teainahat Jul 13 '12 at 20:42

How to make jQuery get the .val() of a newly created element?

What I am trying to do:

3 Answers3