Question

My html contains a table have the structure like this

<table id="sample">
 <tr class="new_input_field">
   <td><input type="text" class="first_input" /></td>
   <td><input type="text" class="second_input" /></td>
   <td><a href="#" class="first_link">Button1</td>
   <td><a href="#" class="second_link">Button2</td>
 </tr><tr class="new_input_field">
   <td><input type="text" class="first_input" /></td>
   <td><input type="text" class="second_input" /></td>
   <td><a href="#" class="first_link">Button1</td>
   <td><a href="#" class="second_link">Button2</td>
 </tr>
 <tr class="new_input_field">
   <td><input type="text" class="first_input" /></td>
   <td><input type="text" class="second_input" /></td>
   <td><a href="#" class="first_link">Button1</td>
   <td><a href="#" class="second_link">Button2</td>
 </tr>
</table>

And for each row in my jquery the values for first_input and second_input value change triggers a call to server and that row will be replaced by like this.

<tr id="AIK">
<td>some content</td>
<td>some other content</td>
<td><a href="#" class="first_link">Button1</td>
<td><a href="#" class="second_link">Button1</td>
</tr>

My Problem is when i click the buttons in dynamically replaced row should show alert. I gave jquery

$('#sample tr td a.first_link').click(function () {
 trid = $(this).closest('tr').attr('id');
 if(trid.length > 0) { alert("Swap out will come soon"); }
});

This works fine for newly replaced row and shows error with remaining two rows as

TypeError: Result of expression 'trid' [undefined] is not an object.

The buttons should be enable for newly replaced rows only. How can i solve this?

Answer 1

You have to assign id first to closest tr and then try like following:

$('#sample tr td a.first_link').click(function () {
 var trid = $(this).closest('tr').attr('id');
 if(trid.length > 0) { alert("Swap out will come soon"); }
});

if you don’t put id then you can try:

var trid = $(this).closest('tr').attr('id') || '';