jQuery數學函數不適用於動態添加的新表格行

我需要使用jQuery來執行基本的數學函數以及動態地向表中添加其他行。到目前爲止，我有這段代碼：jQuery數學函數不適用於動態添加的新表格行

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".sub").focusout(
     function() { 
      $("#net").html(''); 
      var gross = $("#gross").val(); 
      var tare = $("#tare").val(); 
      var net = (gross - tare); 
      $("#net").html(Math.round(net * 1000)/1000); 
     }); 

     $("#add").click(function() { 
     $('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last'); 
     return false; 
     }); 
    }); 
    </script>

而且我的HTML看起來像這樣：

<body> 
    <a id="add">add Line</a> 
    <table id="lineItemTable"> 
    <tr> 
     <th>Gross</th> 
     <th>Tare</th> 
     <th style="padding-right: 10px">Net Weight</th> 
    </tr> 

    <tr class="row_to_clone"> 
     <td> 
     <input type='number' step="any" name='gross' id='gross' class='sub' /> 
     </td> 
     <td> 
     <input type='number' step="any" name='tare' id='tare' class='sub' /> 
     </td> 
     <td id="calculated"> 
     <p id='net' class='sub1'></p> 
     </td> 
    </tr> 
    </table> 
</body>

現在，將另一行表，基本的數學函數的工作之前，但數學函數在單擊add Line按鈕後，不適用於新添加的行。我在這裏錯過了什麼？

來源

2015-08-24 OPK

你違反了規則html基本上是由cloning元素與id。根據html規則，DOM中的id應該是unique。所以，我的建議是，改變id到class和利用$(this)如下獲取正確的元素：

DEMO

你更新HTML將如下所示：

<a id="add">add Line</a> 
<table id="lineItemTable"> 
    <tr> 
     <th>Gross</th> 
     <th>Tare</th> 
     <th style="padding-right: 10px">Net Weight</th> 
    </tr> 

    <tr class="row_to_clone"> 
     <td> 
     <input type='number' step="any" name='gross' class='gross sub' /> 
     <!-- Remove id and add it as class--> 
     </td> 
     <td> 
     <input type='number' step="any" name='tare' class='net sub' /> 
     <!-- Remove id and add it as class--> 
     </td> 
     <td> 
     <p class='net'></p> 
     <!-- Remove id and add it as class--> 
     </td> 
    </tr> 
</table>

和JS將是：

$(document).ready(function() { 
     $(".sub").focusout(//get it using class 
     function() { 
      var parent=$(this).closest('.row_to_clone'); //find its parent first 
      parent.find(".net").html(''); //then get all those elements with necessary class belonging to its parent 
      var gross = parent.find('.gross').val(); 
      var tare = parent.find('.net').val(); 
      var net = (gross - tare); 
      parent.find(".net").html(Math.round(net * 1000)/1000); 
     }); 

     $("#add").click(function() { 
     var newRow=$('#lineItemTable tbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last'); 
     newRow.find('input').val(''); //Comment this if you you want to persist the value 
     newRow.find('p').text('');//Comment this if you you want to persist the value 
     return false; 
     }); 
});

來源

2015-08-24 14:23:25

你必須編寫一個函數，並在插入html後再次調用它。新的HTML是不是在DOM，當你呼叫的站點：

<script type="text/javascript"> 

function do_math() { 
      $("#net").html(''); 
      var gross = $("#gross").val(); 
      var tare = $("#tare").val(); 
      var net = (gross - tare); 
      $("#net").html(Math.round(net * 1000)/1000); 
     }); 


$(document).ready(function() { 
     $(".sub").focusout(
     do_math();   

); 

     $("#add").click(function() { 
     $('#lineItemTabletbody>tr:last').clone(true).insertAfter('#lineItemTable tbody>tr:last'); 
do_math();   
return false; 
     }); 
    }); 
    </script>

來源

2015-08-24 14:17:59 Joerg

jQuery數學函數不適用於動態添加的新表格行

回答

相關問題