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

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

3 个答案: