单击函数更改$(this)的类,第二次单击函数没有看到更新的类

时间:2013-10-24 20:41:12

标签: jquery

我有两个点击功能:一个目标是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
});

3 个答案:

答案 0 :(得分:3)

绑定单击处理程序时,您将绑定到该元素。更改元素的类不会更改您绑定到它的那个处理程序。如果您想要这种行为,则需要将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
});

答案 1 :(得分: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

答案 2 :(得分:1)

这似乎很多工作,这样做会更容易吗?

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

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