javascript - Getting id of dynamically created element jQuery - Stack Overflow

admin管理员组

文章数量:1289845

I am generating some input fields with a drop-down list. I now want the text entered into those input fields to automatically update a span. But, as the input fields are dynamically generated I'm having a hard time getting it to work with jQuery

Thanks for any help!

HTML:

<div id="url">
    ;span id="endpoint" readonly="readonly"> </span>
</url>

<div class="control-group">
    <label class="control-label" for="selectbasic">Endpoint</label>
    <div class="controls">
        <select id="dropdown" name="selectbasic" class="input-xlarge">
        <option value = "none">select</option>
            <option value="id">/test/{id}</option>
            <option value="id_date">/test/{id}/{date}</option>
        </select>
    </div>

javascript:

$('#dropdown').change(function(){
    $('#textBoxContainer').empty();
    var data = $(this).find('option:selected').attr('value');
    var cleaned_data = data.split("_");
    var num_args = cleaned_data.length;
    for (var i = 0; i < num_args; i++){
        $('#textBoxContainer').append('<label class="control-label" for="textinput">' + cleaned_data[i] + '</label><br/><input id="' + cleaned_data[i] + '" name="textinput" size="25" type="text" placeholder="'+ cleaned_data[i] +'" class="input-xlarge"><br/>');
    }

});

jQuery('#date').on('input', function() {
    $('#endpoint').html('test');
})

Here's the Fiddle

I am generating some input fields with a drop-down list. I now want the text entered into those input fields to automatically update a span. But, as the input fields are dynamically generated I'm having a hard time getting it to work with jQuery

Thanks for any help!

HTML:

<div id="url">
    https://api.test.<span id="endpoint" readonly="readonly"> </span>
</url>

<div class="control-group">
    <label class="control-label" for="selectbasic">Endpoint</label>
    <div class="controls">
        <select id="dropdown" name="selectbasic" class="input-xlarge">
        <option value = "none">select</option>
            <option value="id">/test/{id}</option>
            <option value="id_date">/test/{id}/{date}</option>
        </select>
    </div>

javascript:

$('#dropdown').change(function(){
    $('#textBoxContainer').empty();
    var data = $(this).find('option:selected').attr('value');
    var cleaned_data = data.split("_");
    var num_args = cleaned_data.length;
    for (var i = 0; i < num_args; i++){
        $('#textBoxContainer').append('<label class="control-label" for="textinput">' + cleaned_data[i] + '</label><br/><input id="' + cleaned_data[i] + '" name="textinput" size="25" type="text" placeholder="'+ cleaned_data[i] +'" class="input-xlarge"><br/>');
    }

});

jQuery('#date').on('input', function() {
    $('#endpoint').html('test');
})

Here's the Fiddle

• javascript
• jquery
• html
• dynamic

Share Improve this question Follow asked Jan 7, 2014 at 17:23 tknickmantknickman 4,64133 gold badges3636 silver badges4949 bronze badges 5

• You don't need an ID to select an element. $("#textBoxContainer input") will select all inputs that are descendants of textBoxContainer – Kevin B Commented Jan 7, 2014 at 17:25
• What is #endpoint_curl? What is your task? what you need to achieve with this code? – Roko C. Buljan Commented Jan 7, 2014 at 17:27
• </url> is all but not a vaild tag – Roko C. Buljan Commented Jan 7, 2014 at 17:29
• @Roko C. Buljan That was a typo, I edited it above and in the Fiddle. Read the first few lines. It's designed to update the text in the span in real time with the text entered into one of the dynamically created input fields. – tknickman Commented Jan 7, 2014 at 17:31
• @tknickman gotcha, I already fixed it all in my answer's demo link – Roko C. Buljan Commented Jan 7, 2014 at 17:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

LIVE DEMO

$("#textBoxContainer").on('input','#date', function () {
    $('#endpoint').html(this.value);
});

Read the docs about the .on() method and event delegation for dynamically generated elements

you can create the element and assign the function at the same time

DEMO

        $('#textBoxContainer').append( 
            $("<input/>", 
              {
                type: "text", id: cleaned_data[i],
                name: "textinput", size:25, 
                placeholder: cleaned_data[i], 
                class:"input-xlarge", 
                keyup: function inputkeyup(){
                    $("#endpoint").text(this.value);
                }
            })
        ).append("<br/>");

Here is your updated jsfiddle jsfiddle/pgHvV/7/

do everything inside your for loop... you can create and manipulate and make use of controls and their values inside itself...

check for that

for (var i = 0; i < num_args; i++){ $('#textBoxContainer').append('<label class="control-label" for="textinput">' + cleaned_data[i] + '</label><br/><input id="' + cleaned_data[i] + '" name="textinput" size="25" type="text" placeholder="'+ cleaned_data[i] +'" class="input-xlarge"><br/>'); /*do everything here.. you can create a on click on onchange or onblur or on anything for that id....*/ }

本文标签： javascriptGetting id of dynamically created element jQueryStack Overflow