Question

我正在使用下拉列表生成一些输入字段。我现在希望输入到这些输入字段的文本能够自动更新范围。但是，由于输入字段是动态生成的，因此我很难使用jQuery

感谢您的帮助！

HTML：

<div id="url">
    https://api.test.com<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');
})

这是Fiddle

Answer 1

<强> LIVE DEMO

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

阅读有关 动态生成的元素

的.on()方法和事件委派的文档

Answer 2

你可以创建元素并同时分配函数

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/>");

Answer 3

这是您更新的jsfiddle jsfiddle.net/pgHvV/7 /

Answer 4

在你的for循环中做所有事情...... 你可以创建，操纵和利用控件及其内部的价值......

检查

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....*/ }

获取动态创建的元素jQuery的id

4 个答案: