CODEWITHSUNDEEP
javascriptjquery
lewis4u
lewis4u

Reputation: 15027

jQuery dynamic content calculate

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">
<table id="t1" class="table table-hover">
        <tr>
            <th class="text-center">Start Time</th>
            <th class="text-center">End Time</th>
            <th class="text-center">Stunden</th>
          <th> <button type="button" class="addRow">Add Row</button></th>
        </tr>
        <tr id="row1" class="item">
            <td><input name="starts[]" class="starts form-control" ></td>
            <td><input name="ends[]" class="ends form-control" ></td>
            <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
        </tr>
    </table>
</div>

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"><td><input name="starts[]" class="starts form-control" ></td><td><input name="ends[]" class="ends form-control" ></td><td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td></tr>');
                }
            });
                // remove row when X is clicked
            $(document).on("click", ".btn_remove", function () {
            r--;
            var button_id = $(this).attr("id");
                $("#row" + button_id + '').remove();
            });


  });

Upvotes: 0

Views: 61

Answers (2)

Jason Graham
Jason Graham

Reputation: 904

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
      }
}

Upvotes: 0

wegelagerer
wegelagerer

Reputation: 3710

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
}

Upvotes: 2

Related Questions