Удаление класса родителя по клику на внутренний элемент

273

31 декабря 2017, 09:03

Почему по клику на блок .close не убирается класс у родителя?

$('.modal').click(function() { 
  $(this).addClass('hi'); 
}); 
 
$('.close').click(function() { 
  $('.modal').removeClass('hi'); 
});

.hi { 
  color: green; 
}

<div class="modal"> 
  <div class="content">123</div> 
  <div class="close">close</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

Клик по .close приводит к вызову обработчика как для .close, так и для .model. Соответственно, класс удаляется и следом снова добавляется.
Как вариант, можно запрещать "всплывание" события:

$('.modal').click(function() { 
  $(this).addClass('hi'); 
}); 
 
$('.close').click(function() { 
  $('.modal').removeClass('hi'); 
  return false; 
});

.hi { 
  color: green; 
}

<div class="modal"> 
  <div class="content">123</div> 
  <div class="close">close</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

$('.modal').click(function(event) {  
    $(event.target).hasClass('close') ? $(this).removeClass('hi') : $(this).addClass('hi'); 
});

.hi { 
  color: green; 
}

<div class="modal"> 
  <div class="content">123</div> 
  <div class="close">close</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Класс у родителя удаляется, и после этого клик всплывает к нему, где класс добавляется заново. По клику на .close нужно отключать дальнейшее всплытие события.

$('.modal').click(function() { 
  $(this).addClass('hi'); 
}); 
 
$('.close').click(function(e) { 
  e.stopPropagation(); 
  $('.modal').removeClass('hi'); 
});

.hi { 
  color: green; 
}

<div class="modal"> 
  <div class="content">123</div> 
  <div class="close">close</div> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

Вот так, например, все работает:

$('.modal').click(function() { 
  $(this).addClass('hi'); 
}); 
 
$('.close').click(function() { 
  $('.modal').removeClass('hi'); 
});

.hi { 
  color: green; 
} 
.modal { 
  width:100px; 
  height:100px; 
  background:red; 
} 
.close { 
  width:40px; 
  height:30px; 
  background:blue; 
  text-align:center; 
  padding: 10px 0 0; 
  position:relative; 
  top:-100px; 
  left:60px 
}

<div class="modal"> 
  <div class="content">123</div> 
</div> 
<div class="close">X</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>