将click事件绑定到类的未来实例

Question

我正在尝试将jQuery中的click事件绑定到类的所有实例，包括将在页面加载后创建的实例。

我有以下组件：

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');
});

正如您所看到的，当用户点击具有班级x的表格单元格时，我do something，然后将班级x与班级undo交换。 这部分工作正常。

不工作的部分是第二个块，当用户单击具有类do something else的表格单元格时，我尝试undo。正如您所看到的，我尝试将“clicked undo”记录到该块中的控制台，以查看on('click'...)事件是否被触发......但事实并非如此。

我的理解是，在jQuery中复制折旧live()函数的新方法是在父元素上调用.on()，然后在方法的参数中传入目标子元素，如我已经完成了。

但是，很明显，在页面已经加载后添加了类undo的表格单元格没有将.on()事件绑定到它们。

思考？谢谢。

Answer 1

你错过了第二个处理程序选择器中的#。

$('draft-board tbody tr') - ＆gt; $('#draft-board tbody tr')