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

时间:2015-04-09 04:54:09

标签: jquery

下面的示例用于在动态添加的文本框中添加数字     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函数就可以了。有没有动态添加类的方法?

1 个答案:

答案 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>