在toggleClass之后单击事件

Question

我想在两个按钮（span）之间切换 - （当另一个没有时，一个元素激活，反之亦然）。

这里的问题是，即使我从中移除了类，但主要元素实际上从未失去绑定。同样的事情发生在其他元素上，除了效果相反。

HTML：

<span id="ch1">First</span>
<br />
<span id="ch2" class="action">Second</span>

CSS：

body {
font-size:20px;
font-weight:bold;    
}

.action {
cursor:pointer;
font-size:14px;
}

JS：

$('.action').on('click',function(){

        $('#ch1,#ch2').toggleClass('action');

    });

  

FIDDLE：http://jsfiddle.net/n2WUn/

Answer 1

我建议使用委托，将on()方法附加到您希望操作的父元素，并使用选择器来测试元素：

$('body').on('click', '.action', function () {
    $('#ch1,#ch2').toggleClass('action');
});

JS Fiddle demo

这样做的方式是命名事件（'click'）冒泡到祖先元素，事件的目标是针对选择器（'.action'）检查的，如果它匹配选择器执行回调函数。

通常，您应该使用在事件绑定时存在于DOM中的最接近的非更改元素（在您的情况下是body元素，但在大多数Web页面中将是另一个元素在页面内。）

参考文献：

• on()。

Answer 2

将其更改为：

$('body').on('click', '.action', function(){
    $('#ch1,#ch2').toggleClass('action');
});

Answer 3

这里有效：DEMO。 .on方法适用于父引用。

Answer 4

这项工作做得很好。

$(function(){
    $('.action').bind('click',function(){
         $('#ch1,#ch2').toggleClass('action');
    });
});