Обработчик не видит смены класса jQuery

167

01 мая 2019, 23:30

Есть простенький код:

$('.like').on("click", function(){
            console.log("click_l");
            $(this).addClass('unlike');
});
$('.unlike').on("click",function(){
            console.log("click_u");
            $(this).addClass('like');
});
<button class="btn btn-default card_body_like like_div unlike"><div></div></button>

Как видно изначально класс unlike (для него есть свой стиль, подсветка, как и в like) Проблема в том, что постоянно выводит в консоль click_u, то есть даже когда класс unlike пропал, а вместо него поставил like - оно принимает эту кнопку как элемент с классом unlike

Answer 1

Потому что $('.like').on("click" ... выполняется один раз и прикрепляет обработчик клика к элементам выборки $('.like'), то есть элементам с классом "like" на момент выполнения этого кода.

$('.container').on("click", '.like,.unlike', function() { 
 
  if ($(this).hasClass('like')) 
    console.log("click_l"); 
  if ($(this).hasClass('unlike')) 
    console.log("click_u"); 
 
  $(this).toggleClass('unlike like'); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <button class="btn btn-default card_body_like like_div unlike"><div>Click</div></button> 
</div>