jquery - 单击功能更改 $(this )'s class, second click function doesn' t 查看更新的类

Question

我有两个点击函数:一个针对 td.default，第二个针对 td.clicked。两者都将类属性更改为“单击”或“默认”(并更新单元格中的文本)。这些类从第一个 click 函数开始发生变化，但查找 td.click 的第二个 click 函数找不到它的目标。

$("td.default").click(function() {
    $(this).attr('class','clicked');
    $(this).text("monkey");
    $("#ouput").append("td.default clicked<br/>"); //reporting message
});
$("td.clicked").click(function() {
    $(this).attr('class','default');
    $(this).text("empty");
    $("#ouput").append("td.clicked clicked<br/>"); //reporting message
});

Answer 1

当您绑定(bind)点击处理程序时，您正在绑定(bind)到该元素。更改元素的类不会更改绑定(bind)到它的处理程序。如果您想要这种行为，则需要将 on() 与事件委托(delegate)结合使用。请参阅on() ，尤其是有关“直接事件和委托(delegate)事件”的部分。

Demo Click Here :

$(document).on('click', "td.default", function() {
    $(this).attr('class','clicked');
    $(this).text("monkey");
    $("#ouput").append("td.default clicked<br/>"); //reporting message
});
$(document).on('click', "td.clicked", function() {
    $(this).attr('class','default');
    $(this).text("empty");
    $("#ouput").append("td.clicked clicked<br/>"); //reporting message
});