jQuery:将类添加到新元素后,不能通过单击该类来触发事件

时间:2013-12-01 20:49:20

标签: javascript jquery onclick addclass

这是我正在尝试的:当我点击具有类.main的元素时,该类被重新分配给下一个元素。单击下一个元素(新的.main元素)时,.main将重新分配给下一个元素,依此类推。这是我的代码:

$('.main').click(function() {
  $(this).removeClass("main").addClass("other");
  $(this).next().removeClass("other").addClass("main");
});

当我点击原始.main元素时,将转移该类。但是,单击新的.main元素不会再次触发该事件。是什么导致这个?我完全错误地采取了这种方式吗?

这是一个小提琴:

http://jsfiddle.net/UHLft/2/

1 个答案:

答案 0 :(得分:6)

事件绑定到DOM节点,而不是类名(尽管类名当然用于初始选择相关元素);因此,当类名更改时,事件不再被绑定,因此您需要使用on()将事件处理程序委托给父级:

$('#container').on('click', '.main', function () {
    $(this).removeClass("main").addClass("other");
    $(this).next()
        .removeClass("other").addClass("main");
});

JS Fiddle demo

参考文献: