classname.each 函数不适用于动态添加的函数

Question

以下示例用于在动态添加的文本框中添加数字。
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 函数不适用于动态添加的元素。但如果我添加任何文本框（非动态），classname.each 函数在这种情况下工作。有没有动态添加类的方法？

Answer 1

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>