添加另一行被點擊後，在附加功能

Question

我有這樣編寫的函數：

 $(".tdAdd").on("click", function() { 
     counter = $('#myTable tr').length - 3; //supposing i only have 2 data 
     var count = $("#myTable").length; 
     var newRow = $("<tr>"); 
     var cols = ""; 
     cols += '<td><input type="button" value="Add" class="tdAdd"/></td>'; 
     cols += '<td><input type="text" name="name' + counter + '"/></td>'; 
     cols += '<td><input type="text" name="price' + counter + '"/></td>'; 

     cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>'; 
     newRow.append(cols); 
     $("table.order-list").append(newRow); // this is adding row to the end. but i want i on a specific row after where the add button was clicked 
     counter++; 
    }); 

    $("table.order-list").on("click", ".ibtnDel", function (event) { 
     $(this).closest("tr").remove(); 
    }); 




}); 

，我的表是這樣的：

<table id="myTable" class="order-list"> 
<thead> 
    <tr> 
     <td></td> 
     <td></td> 
     <td>Name</td> 
     <td>Price</td> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
      <td style="text-align: left;"> 
      <input type="button" id="addrow" value="Add Row" /> 
     <td> 
      <input type="text" name="name" /> 
     </td> 
     <td> 
      <input type="text" name="price1" /> 
     </td> 
     <td> 
      <input type="button" value="Delete" class="ibtnDel"/> 
     </td> 
    </tr> 
</tbody>   

</table> 

下面是一個簡單Fiddle

我想在下面添加另一行，點擊添加行按鈕。小提琴只會在桌子底部添加一行，只有第一個按鈕可以工作。任何幫助，將不勝感激。謝謝！

我想：

$("table.order-list").eq(count-1).after(newRow) 

，但我仍然無法得到代碼工作

Answer 1

您需要將事件偵聽器應用於文檔，因爲按鈕是動態創建的。 EG：

$(document).on("click", '.tdAdd', function() { ... } 

查看更新後的提琴：

http://jsfiddle.net/y8F88/1/