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

这是我正在尝试的：当我点击一个带有类.main的元素时，该类被重新分配给下一个元素。 单击下一个元素（新的.main元素）时，.main将重新分配给下一个元素，依此类推。 这是我的代码：

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

当我单击原始.main元素时，将传输该类。 但是，单击新的.main元素不会再次触发该事件。 是什么导致这个？ 我完全是错误的做法吗？

这是一个小提琴：

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

Answer 1

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

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

JS小提琴演示 。

参考文献：

• on() 。