Не работает jQuery Click по картинке

178

26 августа 2018, 01:50

Первый клик работает, на второй не хочет... В чем может быть проблемма?

$('.hidden').on('click', function() { 
  $('#contact_us').removeClass('hidden'); 
  $('#contact_us').addClass('open'); 
}); 
$('#close_button_img').on('click', function() { 
  $('#contact_us').removeClass('open'); 
  $('#contact_us').addClass('hidden'); 
});

.hidden { 
  cursor: pointer; 
  overflow: hidden; 
  position: fixed; 
  top: 40%; 
  left: 8%; 
  font-size: 20px; 
  color: #fff; 
  text-align: center; 
  vertical-align: central; 
  writing-mode: vertical-rl; 
  width: 34px; 
  height: 140px; 
  max-width: 34px; 
  max-height: 140px; 
  background: #FBC449; 
  border: 1px solid #FFDD8F; 
  -webkit-box-shadow: -2px 0 2px 0 #B8A3AF; 
  box-shadow: -2px 0 2px 0 #B8A3AF; 
} 
 
.hidden>div { 
  display: none; 
} 
 
.open { 
  display: normal; 
  position: fixed; 
  top: 10%; 
  left: 13%; 
  font-size: 20px; 
  color: #fff; 
  text-align: center; 
  vertical-align: central; 
  writing-mode: horizontal-tb; 
  width: 1000px; 
  height: 500px; 
  background: #FFDD8F; 
  border: 1px solid #FBC449; 
} 
 
#contact_us_body input { 
  width: 200px; 
  height: 60px; 
  background: #FBC449; 
  border: 1px solid #FFDD8F; 
  padding: 2px 4px; 
  margin: 12px 24px; 
  -webkit-box-shadow: -2px 0 2px 0 #B8A3AF; 
  box-shadow: -2px 0 2px 0 #B8A3AF; 
  transition: 1s; 
} 
 
#contact_us_body input:hover { 
  width: 210px; 
  height: 64px; 
  background: #FFDD8F; 
  border: 2px solid #FBC449; 
  padding: 4px 6px; 
  margin: 8px 20px; 
  -webkit-box-shadow: -2px 0 4px 0 #B8A3AF; 
  box-shadow: -2px 0 4px 0 #B8A3AF; 
  transition: 1s; 
} 
 
#contact_us_up { 
  width: 96%; 
  margin: 10px auto; 
  border-bottom: 2px solid #FBC449; 
} 
 
#close_button { 
  width: 20px; 
  height: 20px; 
  float: right; 
  margin: -40px -30px; 
  transition: 1s; 
  background: #FBC449; 
  border: 1px solid #FBC449; 
  border-radius: 50%; 
  cursor: pointer; 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
} 
 
#close_button:hover { 
  transition: 1s; 
  -webkit-transform: rotate(-225deg); 
  -moz-transform: rotate(-225deg); 
  -ms-transform: rotate(-225deg); 
  -o-transform: rotate(-225deg); 
} 
 
#close_button img { 
  width: 20px; 
  height: 20px; 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!--Contact US--> 
<div id="contact_us" class="hidden"> 
  Contacteaza-ne 
  <div id="contact_us_body"> 
    <div id="contact_us_up"> 
      <div id="close_button" class="close_button"><img src="style/img/plus.png" id="close_button_img" /></div> 
      <input type="text" placeholder="Numele:" alt="Numele:" title="Numele:" /> 
      <input type="number" placeholder="GSM:" alt="GSM:" title="GSM:" /> 
      <input type="text" placeholder="Domeniu:" alt="Domeniu:" title="Domeniu:" /> 
      <input type="button" value="Astept un Sunet" alt="Astept un Sunet" title="Astept un Sunet" id="send_recall" /> 
    </div> 
    <div class="clear"></div> 
    <div id="contact_us_down"></div> 
 
  </div> 
</div> 
<div class="clear"></div> 
<!--Contact US-->

Answer 1

UPDATE:

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

Я бы советовал скрывать не родительский элемент, а вместо этого внутри contact_us добавить кнопку и блок с контентом которому и будет добавляться класс hidden.

Либо кнопку сделать вовсе за пределами блока contact_us.

И, как правильно заметили в ответе ниже, нужно использовать делегирование:

$(document).on("click", ".button", function(e) {
  <!--Ваш код-->
});

Это не относится напрямую к вашей проблеме, просто хорошая практика, такая привычка предотвратит кучу проблем в будущем.

Answer 2

Объяснение в ответе выше неправильное. Событие навешивается на элемент (или элементы), который ищется по классу hidden. Таким образом, важно наличие этого класса в момент вызова $('.hidden').on('click', .... В дальнейшем, класс у элемента (или элементов) можно удалить, обработчик события от этого не отсоединится.

Чтобы обработчик вызывался для элементов, у которых есть класс hidden в момент клика, независимо от того, наличествует ли этот класс в момент назначения обработчика (и вообще, существует ли в тот момент сам элемент), используйте делегирование:

$(document).on("click", ".hidden", function(e) {
  ...
});

Но в Вашем случае достаточно просто:

$('.hidden').on('click', function() {
  $('#contact_us').removeClass('hidden');
  $('#contact_us').addClass('open');
});
$('#close_button_img').on('click', function(e) {
  e.stopPropagation(); // !!!
  $('#contact_us').removeClass('open');
  $('#contact_us').addClass('hidden');
});

Что происходит у Вас - без e.stopPropagation();:

При клике по close_button_img сначала выполняется обработчик $('#close_button_img').on('click', - пока что все хорошо, элемент прячется, но потом событие "всплывает" до родительского элемента <div id="contact_us" class="hidden">, у которого тоже есть обработчик - элемент показывается опять, и Bы даже не успеваете заметить, что его выключили/включили.