使用Jquery获取动态创建的元素的值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用Jquery获取动态创建的元素的值相关的知识，希望对你有一定的参考价值。
我使用jquery动态创建输入元素，但是当我尝试访问动态创建的元素值时，我得到empty或undefined或。我尝试了许多方法来获取值，但它失败了。
有人可以帮我完成这件事。
这是代码
$(document).ready(function() {
var count = 0;
var jsondata = [];
var selectedField;
$('.add').click(function() {
count = count + 1;
jQuery('<div/>', {
id: 'form-wrapper' + count,
class: 'form-wrapper' + count,
title: 'now this div has a title!'
}).appendTo('.wrapper0');
$('.form-wrapper' + count).append("<label>FieldName</label> <input type='text' placeholder='label' id='label" + count + "'></input> <select class='select" + count + "'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' id='commavalues" + count + "' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' id='required" + count + "'>Required</input><button class='delete'>Delete</button> <br><br>");
$('.delete').click(function(e) {
($(this).parent().remove());
});
$('.select' + count).change(function() {
selectedField = $(this).children('option:selected').val();
if (selectedField == 'checkbox' || selectedField == 'radio') {
$('#commavalues' + count).prop('disabled', false);
flag = 1;
} else {
flag = 0;
$('#commavalues' + count).prop('disabled', true);
}
});
item = {};
var label = $('#label' + count).val();
var required = $('#required' + count).is(":checked");
var label_type = selectedField;
var options = $('#commavalues' + count).val();
console.log(label);
console.log(required);
console.log(label_type);
console.log(options);
item["label"] = label;
item["label_type"] = label_type;
item["options"] = options;
item["required"] = required;
jsondata.push(item);
});
$('.save').click(function() {
console.log(jsondata);
});
});body {
background-color: #ECEFF1;
margin: 50px 0;
padding: 0;
text-align: center;
}
button {
position: relative;
margin-left: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
<div class="form-wrapper">
<label>FieldName</label>
<input type="text" placeholder="label" class="label0"></input>
<select class="select0">
<option>Select</option>
<option value="textbox">Textbox</option>
<option value="textarea">TextArea</option>
<option value="checkbox">Checkbox</option>
<option value="radio">Radio</option>
<option value="date">Date</option>
</select>
<input type="text" class="commavalues0" disabled placeholder="Enter comma(,) seperated values"></input>
<input type="checkbox" class="required0">Required</input>
<br><br>
</div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>当我单击save按钮时，我试图以JSON格式显示，如果我单击删除按钮，则还要删除与该输入字段关联的数据。
答案
一个问题是所有的闭包都使用相同的count变量，每次添加另一个元素时它会增加。他们需要每个闭包的局部变量。
但最好完全摆脱这个变量。只需为它们提供相同的类，并使用事件委托绑定到动态添加的元素。有关详细说明，请参阅Event binding on dynamically created elements?。
另一个问题是，您在添加元素时获取值，而不是在用户单击“保存”按钮时获取值。当发生这种情况时，您需要遍历所有元素。
$(document).ready(function() {
$('.add').click(function() {
var form_wrapper = jQuery('<div/>', {
class: 'form-wrapper',
title: 'now this div has a title!',
html: "<label>FieldName</label> <input type='text' placeholder='label' class='label'></input> <select class='select'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required'>Required</input><button class='delete'>Delete</button> <br><br>"
}).appendTo('.wrapper0');
});
$('.save').click(function() {
var jsondata = $(".form-wrapper").map(function() {
var label = $(this).find(".label").val();
var required = $(this).find(".required").is(":checked");
var label_type = $(this).find(".select").val();
var options = $(this).find(".commavalues").val();
return {
label,
required,
label_type,
options
};
}).get();
console.log(jsondata);
});
$(".wrapper0").on("click", ".delete", function(e) {
($(this).parent().remove());
});
$(".wrapper0").on("change", '.select', function() {
var selectedField = $(this).val();
if (selectedField == 'checkbox' || selectedField == 'radio') {
$(this).siblings('.commavalues').prop('disabled', false);
} else {
$(this).siblings('.commavalues').prop('disabled', true);
}
});
});body {
background-color: #ECEFF1;
margin: 50px 0;
padding: 0;
text-align: center;
}
button {
position: relative;
margin-left: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper0">
<div class="form-wrapper">
<label>FieldName</label>
<input type="text" placeholder="label" class="label"></input>
<select class="select">
<option>Select</option>
<option value="textbox">Textbox</option>
<option value="textarea">TextArea</option>
<option value="checkbox">Checkbox</option>
<option value="radio">Radio</option>
<option value="date">Date</option>
</select>
<input type="text" class="commavalues" disabled placeholder="Enter comma(,) seperated values"></input>
<input type="checkbox" class="required">Required</input>
<br><br>
</div>
</div>
<button class="add">Add</button>
<button class="save">Save</button>另一答案
嘿，我修复了未定义的错误，似乎按预期工作。你可以在脚本中替换下面的代码。
<script>
$(document).ready(function(){
var count = 0;
var jsondata=[];
var selectedField;
$('.add').click(function(){
jQuery('<div/>', {
id: 'form-wrapper'+count,
class: 'form-wrapper'+count,
title: 'now this div has a title!'
}).appendTo('.wrapper0');
$('.form-wrapper'+count).append("<label>FieldName</label> <input type='text' placeholder='label' class='label"+(count+1)+"'></input> <select class='select"+(count+1)+"'><option>Select</option><option value='textbox'>Textbox</option><option value='textarea'>TextArea</option><option value='checkbox'>Checkbox</option><option value='radio'>Radio</option><option value='date'>Date</option> </select><input type='text' class='commavalues"+(count+1)+"' disabled placeholder='Enter comma(,) seperated values'></input><input type='checkbox' class='required"+(count+1)+"'>Required</input><button class='delete'>Delete</button> <br><br>");
$('.delete').click(function(e){
($(this).parent().remove());
});
item = {};
var label = $('.label'+count).val();
var required = $('.required'+count).prop("checked");
var label_type = selectedField;
var options = $('.commavalues'+count).val();
console.log(label);
console.log(required);
console.log(label_type);
console.log(options);
item["label"] = label;
item["label_type"] = label_type;
item["options"] = options;
item["required"] = required;
jsondata.push(item);
count++;
});
$('.save').click(function(){
console.log(jsondata);
});
$('.select'+count).on('change', function(){
selectedField = $(this).find('option:selected').text();
if(selectedField == 'checkbox' || selectedField == 'radio'){
$('#commavalues'+count).prop('disabled', false);
flag = 1;
}
else{
flag = 0;
$('#commavalues'+count).prop('disabled', true);
}
});
});
</script>
另一答案
动态或不是DOM中的元素是相同的。 JQuery是javascript，不能用JavaScript做些什么。 JavaScript主要是关于DOM，DOM是关于元素，属性和属性的HTML。所以div没有属性.value，而是你要使用Javascript .innerHTML（甚至是outerHTML），你可以通过.html（）或.text（）来访问JQuery，你想要操作纯HTML（谁' DOM中的重新对象）或文本。 .value属性是关于HTML表单标记中的输入或此类元素。希望这对你有所帮助。
以上是关于使用Jquery获取动态创建的元素的值的主要内容，如果未能解决你的问题，请参考以下文章