javascript - toggleClass 之后的点击事件

Question

我想在两个按钮（跨度）之间切换 - （一个元素处于活动状态，而另一个元素不处于活动状态，反之亦然）。

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

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');

    });

小提琴：http : //jsfiddle.net/n2WUn/

score 4 · Accepted Answer

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

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

其工作方式是命名事件 ( 'click') 冒泡到祖先元素，根据选择器 ( '.action') 检查事件的目标，如果它与选择器匹配，则执行回调函数。

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

参考：

score 2 · Accepted Answer

将其更改为：

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

score 0 · Accepted Answer

0

它在这里工作：演示。.on方法将适用于父参考。

于 2013-08-08T16:43:52.120 回答

score 0 · Accepted Answer

这工作得很好。

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

4 回答 4