jquery - 表中的动态替换行显示已存在行的错误

Question

我的 html 包含一个表，其结构如下

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

对于我的 jquery 中的每一行，first_input 和 second_input 值更改的值会触发对服务器的调用，并且该行将被这样替换。

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

我的问题是当我单击动态替换行中的按钮时应该显示警报。我给了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"); }
});

这适用于新替换的行，并显示剩余两行的错误为

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

这些按钮应该只对新替换的行启用。我该如何解决这个问题？

Answer 1

由于您正在处理动态添加的表行，因此您不应该使用$.click. 相反，您应该通过以下$.on方法使用委托：

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

Answer 2

您必须首先分配id给最近的tr，然后尝试如下：

$('#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"); }
});

如果你不输入 id 那么你可以尝试：

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

Answer 3

您是否尝试过使用，

$('#sample tr td a.first_link').live('click',function...

代替

$('#sample tr td a.first_link').click(function...