classname.each function is not working for dynamically added functions

Question

Below Example is used to add numbers in the text boxes added dynamically.
First Input tells that the number of text box should be displayed. If its 5 then 5 text box will be displayed.

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 />");                
});

it gives output when I use input name -Shows correct answer. I used latest version of jquery. thats why I use 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);
});

But When I use class name it shows wrong answer .

 $(document).on('click', ".btn1", function(){  
    var sum=0;
    var d;
    $(".test").each(function () {
        d=$(this).val();
        sum=sum+parseInt(d);
    });
    alert(sum);
 });

Why classname.each function is not working for dynamically added elemenets. but if I add any text box(Not Dynamically), classname.each function is working in that case. Is there any method for dynamically added class?

Two elements with same ID cd? | Function name should be empty() — Shaunak D
– Shaunak D, Commented Apr 9, 2015 at 5:05

Barmar · Accepted Answer · 2015-04-09 05:06:26Z

0

You didn't put a space after class=test, so the class is test/. The best practice is to quote your attributes.

$(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>

answered Apr 9, 2015 at 5:06

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

.test includes the input field to the right of the button, did you remember to fill that in?

Barmar Over a year ago

You should probably check whether parseInt returns NaN. Otherwise, it only works if all the fields are filled in.

Collectives™ on Stack Overflow

classname.each function is not working for dynamically added functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related