Не срабатывает событие click второй раз

156

27 апреля 2019, 18:50

Не срабатывает второй раз событие по нажатию на активный элемент. В чем может быть причина, подскажите, пожалуйста?

$('.products-grid-header li.active-items').on('click', function() { 
    $('.products-grid-header-item').show(); 
 
    $('.products-grid-header-item').click(function() { 
        $('.products-grid-header li.active-items').removeClass('active-items'); 
        $(this).addClass('active-items'); 
        $('.products-grid-header li:not(.active-items)').each(function() { 
            $(this).hide(); 
        }); 
    });         
});

.products-grid-header li:not(.active-items){ 
		display: none; 
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="products-grid-header"> 
    <li class="products-grid-header-item active-items"> 
        <a class="" href="#1">1</a> 
    </li> 
    <li class="products-grid-header-item"> 
        <a class="" href="#2">2</a> 
    </li> 
    <li class="products-grid-header-item"> 
        <a class="" href="#3">3</a> 
    </li> 
    <li class="products-grid-header-item"> 
        <a class="" href="#4">4</a> 
    </li> 
    <li class="products-grid-header-item"> 
        <a class="" href="#5">5</a> 
    </li> 
    <li class="products-grid-header-item"> 
        <a class="" href="#6">6</a> 
    </li> 
</ul>

Answer 1

Клик срабатывает, но второй обработчик сразу же прячет элементы. Рассмотри такой вариант

$('.products-grid-header-item').on('click', function() { 
  $('.products-grid-header-item').toggle(); 
  $(this).show() 
})

.products-grid-header li:not(.active-items) { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="products-grid-header"> 
  <li class="products-grid-header-item active-items"> 
    <a class="" href="#1">1</a> 
  </li> 
  <li class="products-grid-header-item"> 
    <a class="" href="#2">2</a> 
  </li> 
  <li class="products-grid-header-item"> 
    <a class="" href="#3">3</a> 
  </li> 
  <li class="products-grid-header-item"> 
    <a class="" href="#4">4</a> 
  </li> 
  <li class="products-grid-header-item"> 
    <a class="" href="#5">5</a> 
  </li> 
  <li class="products-grid-header-item"> 
    <a class="" href="#6">6</a> 
  </li> 
</ul>