Title: jQuery dynamic content calculate
Tags: javascript;jquery
Question: My code is working perfectly with static part, but when i add a new row it won't calculate the field. What am i doing wrong?

It should calculate also the dynamic fields which are added via Add Row button

Live DEMO

```<div class="container"&gt;
<table id="t1" class="table table-hover"&gt;
        <tr&gt;
            <th class="text-center"&gt;Start Time</th&gt;
            <th class="text-center"&gt;End Time</th&gt;
            <th class="text-center"&gt;Stunden</th&gt;
          <th&gt; <button type="button" class="addRow"&gt;Add Row</button&gt;</th&gt;
        </tr&gt;
        <tr id="row1" class="item"&gt;
            <td&gt;<input name="starts[]" class="starts form-control" &gt;</td&gt;
            <td&gt;<input name="ends[]" class="ends form-control" &gt;</td&gt;
            <td&gt;<input name="stunden[]" class="stunden form-control" readonly="readonly" &gt;</td&gt;
        </tr&gt;
    </table&gt;
</div&gt;
```

js

```$(document).ready(function(){
$('.item').keyup(function(){

        var starts = $(this).find(".starts").val();
        var ends = $(this).find(".ends").val();
                    var stunden;
         s = starts.split(':');
         e = ends.split(':');

         min = e[1]-s[1];
         hour_carry = 0;
         if(min < 0){
             min += 60;
             hour_carry += 1;
         }
         hour = e[0]-s[0]-hour_carry;
         min = ((min/60)*100).toString()
         stunden = hour + "." + min.substring(0,2);

        $(this).find(".stunden").val(stunden);
});    

 // function for adding a new row
            var r = 1; 
            $('.addRow').click(function () {
            if(r<10){  
                r++;
                $('#t1').append('<tr id="row'+ r +'" class="item"&gt;<td&gt;<input name="starts[]" class="starts form-control" &gt;</td&gt;<td&gt;<input name="ends[]" class="ends form-control" &gt;</td&gt;<td&gt;<input name="stunden[]" class="stunden form-control" readonly="readonly" &gt;</td&gt;</tr&gt;');
                }
            });
                // remove row when X is clicked
            $(document).on("click", ".btn_remove", function () {
            r--;
            var button_id = $(this).attr("id");
                $("#row" + button_id + '').remove();
            });


  });
```

Comment: i have deleted that second static row and still doesn't work! It seems to me as it doesn't see this new dynamic rows which are being added.

Comment: first off, if you already have 2 rows, you should be initialising r at 3, not 1, ids should be unique

Here is the accepted answer: The best thing would be to use the .on() event which is used to attach one or more event handlers to the element:

```$(document).on('keyup', '.item',function(){
//your code
}
```


Here is another answer: When you dynamically add a new row to your table, the "keyup" event wont automatically be bound to it. Essentially you need to wrap the "keyup" event binding into a function, then call it after you've added the new row on. Something along the lines of:

```function rebindKeyup(){
      $('.item').keyup(function(){
      // Key up logic
      }
}
```

Comment for this answer: Agramer has the best answer for me! But Thank you!
Comment for this answer: No problem, glad you're sorted!

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:05/30/16', 'FavoriteCount': 0.0, 'PostTypeId': 1, 'Tags': '<javascript><jquery>', 'Title': 'jQuery dynamic content calculate', 'ViewCount': 51, 'id': 37529645, 'user_AboutMe': '', 'user_AccountId': 2920303.0, 'user_DisplayName': 'lewis4u', 'user_Reputation': 13463.0, 'user_Views': 1289.0, 'user_id': 2502731.0}}