1

我有两个点击功能：一个针对 td.default 和第二个 td.clicked。两者都将类属性更改为“单击”或“默认”（并更新单元格中的文本）。类正在从第一次单击功能更改，但查找 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
});
4

3 回答 3

3

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

演示点击这里：

$(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
});
于 2013-10-24T20:44:33.997 回答
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()，这不会重新绑定动态修改的节点。在此处阅读有关委托的更多信息on

于 2013-10-24T20:44:08.667 回答
1

看起来工作量很大，这样做会更容易吗？

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

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

于 2013-10-25T00:26:58.897 回答