我正在尝试将click
jQuery 中的事件绑定到类的所有实例,包括将在页面加载后创建的事件。
我有以下组件:
HTML
<table id='draft-board'>
<tbody>
<tr id='1'>
<td class='x'><img src='images/x.png' /></td>
<td class='check available'><img src='images/checkmark.png' /></td>
<td class='rank'>1</td>
<td class='player'>Last, First</td>
</tr>
. . .
Javascript
/*** this one works fine ***/
$('#draft-board tbody tr').on('click', 'td.x', function() {
//do something...
$(this).addClass('undo').removeClass('x');
});
/*** this one doesn't get triggered ***/
$('draft-board tbody tr').on('click', 'td.undo', function() {
console.log('clicked undo');
//do something else...
$(this).addClass('x').removeClass('undo');
});
如您所见,当用户单击带有 class 的表格单元格时x
,我do something
然后将 classx
与 class交换undo
。这部分工作正常。
不起作用的部分是第二个块,do something else
当用户单击带有 class 的表格单元格时,我尝试在其中尝试undo
。如您所见,我尝试将“单击的撤消”记录到该块内的控制台中,以查看on('click'...)
事件是否甚至被触发......它不是。
我的理解是,live()
在 jQuery 中复制折旧函数的新方法是调用.on()
父元素,然后在方法的参数中传入目标子元素,就像我所做的那样。
但是,显然,undo
在页面加载后添加了类的表格单元格没有将该.on()
事件绑定到它们。
想法?谢谢你。