javascript 获取动态创建的元素 jQuery 的 id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20977945/
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
Getting id of dynamically created element jQuery
提问by tknickman
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
我正在生成一些带有下拉列表的输入字段。我现在希望输入到这些输入字段中的文本自动更新跨度。但是，由于输入字段是动态生成的，我很难让它与 jQuery 一起工作
Thanks for any help!
谢谢你的帮助！
HTML:
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:
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
这是小提琴
回答by Roko C. Buljan
回答by Juan
you can create the element and assign the function at the same time
您可以同时创建元素并分配功能
$('#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/>");
回答by Abhishek
Here is your updated jsfiddle jsfiddle.net/pgHvV/7/
这是您更新的 jsfiddle jsfiddle.net/pgHvV/7/
回答by Ganesh Gaxy
do everything inside your for loop... you can create and manipulate and make use of controls and their values inside itself...
在 for 循环中执行所有操作……您可以创建、操作和使用控件及其内部的值……
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....*/ }
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....*/ }
