[英]Get the values of Dynamically created elements using 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
變量,每次添加另一個元素時該變量都會遞增。 對於每個閉包,它們都需要一個局部變量。
但是最好完全擺脫該變量。 只需為它們提供相同的類,然后使用事件委托將其綁定到動態添加的元素。 請參閱對動態創建的元素進行事件綁定? 有關詳細說明。
另一個問題是,添加元素時會獲取值,而不是用戶單擊“保存”按鈕時會獲取值。 發生這種情況時,您需要遍歷所有元素。
$(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(甚至是externalHTML),因為您要操作純HTML(誰可以使用.html()或.text()來訪問JQuery中的Javascript)。反對DOM)或文本。 .value屬性與HTML表單標簽中的輸入或此類元素有關。 希望對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.