Нажмите событие после 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, но на большинстве веб-страниц будет еще один элемент на странице).

Ссылки:

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