Question

我有两个点击功能：一个目标是td.default，第二个是td.clicked。两者都将class属性更改为“clicked”或“default”（并更新单元格中的文本）。这些类正在从第一个单击函数更改，但是查找td.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

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

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

Answer 2

使用委托代替

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

委托将处理节点v / s .click()上的动态更改，这不会重新绑定动态修改的节点。 Read more on delegation using on here

Answer 3

这似乎很多工作，这样做会更容易吗？

$('td.default,td.clicked').on('click', function() {
    $(this).toggleClass('default').toggleClass('clicked').text(
        $(this).text() === 'empty' ? 'monkey' : 'empty'
    );
});

做了一个小提琴：http://jsfiddle.net/filever10/PdjMX/

单击函数更改$（this）的类，第二次单击函数没有看到更新的类

3 个答案: