I've an HTML table that uses the jQuery-datatables plug-in.

One of the columns in the table includes a button for adding a new row to the table immediately following the row where the button was clicked from.

My HTML code is as follows :

1. <table id="contactInfo">
2. <thead>...</thead>
3. <tbody>
4. <tr>
5. <td>...</td>
7. <td><button type="button" class="addRow">+</button></td>
8. <td>...</td>
9. </tr>
10. </tbody> 
11.  </table>
12. And my jQuery code for firing the corresponding onclick event handler for the button is as follows:

2. $(function() {
3.     // HTML template of a row
4.     var html = '<tr><td> </td> <td> </td> <td> </td> <td> 1 </td> <td> 2 </td> </tr>';
5. 
   
6.     $('#contactInfo').delegate("button.addRow", "click" , function() {
7.         alert("button clicked");
8.         var row = $(this).closest(tr); // get the parent row of the clicked button
9.         $(html).insertAfter(row); // insert content
10.     }); 

});   

With this code, the function() to execute my button's onclick event isn't loading and therefore I cant event see the "button clicked" alert msg.

Any ideas what I'm wrong, or any alternative would be of great help.

-Pritish.