我有两个点击功能:一个目标是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
});
答案 0 :(得分: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
});
答案 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'
);
});