下面的示例用于在动态添加的文本框中添加数字 First Input表示应显示文本框的数量。如果将显示其5然后5文本框。
HTML
<div id="maindiv">
Enter Count <input name="test" id="cd"/>
<input type="button" value="GetValue" id="btn"/>
<input name="test1" class ="test" id="cd"/>
</div>
的jQuery
$(document).on('click', "#btn", function(){
$('#maindiv').empty;
var count=$('#cd').val();
var i=0;
while(i<count) {
$('#maindiv').append("<div><input name=DynamicTextBox type=text class=test/></div>");
}
$('#maindiv').append("<input type=button value=add class=btn1 />");
});
当我使用输入名称时给出输出 - 显示正确的答案。我使用了最新版本的jquery。这就是为什么我使用document.on
$(document).on('click', ".btn1", function(){
var sum=0;
var d;
$("input[name=DynamicTextBox]").each(function () {
d=$(this).val();
sum=sum+parseInt(d);
});
alert(sum);
});
但是当我使用类名时,它会显示错误的答案。
$(document).on('click', ".btn1", function(){
var sum=0;
var d;
$(".test").each(function () {
d=$(this).val();
sum=sum+parseInt(d);
});
alert(sum);
});
为什么classname.each函数不适用于动态添加的elemenets。但是如果我添加任何文本框(非动态),那么classname.each函数就可以了。有没有动态添加类的方法?
答案 0 :(得分:0)
您没有在class=test
之后添加空格,因此该课程为test/
。最佳做法是引用您的属性。
$(document).on('click', "#btn", function() {
$('#maindiv').empty;
var count = $('#cd').val();
var i = 0;
while (i < count) {
$('#maindiv').append('<div><input name="DynamicTextBox" type="text" class="test" /></div>');
i++;
}
$('#maindiv').append('<input type="button" value="add" class="btn1" />');
});
$(document).on('click', ".btn1", function() {
var sum = 0;
var d;
$(".test").each(function() {
d = $(this).val();
sum = sum + parseInt(d);
});
alert(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maindiv">
Enter Count
<input name="test" id="cd" />
<input type="button" value="GetValue" id="btn" />
<input name="test1" class="test" id="cd" />
</div>