Слияние класса и document в селекторе

369

05 февраля 2017, 13:37

Есть поп-ап форма, нужно ее закрывать если клик за ее пределами и закрывать-открывать если клик по кнопке которая ее вызывает. Собственно код написал. Но не могу понять как совместить в селекторе $(document) и $(".region-item"). Или может у кого есть сниппет получше?

$(document).click(function (event) {
        if($(event.target).has(".all-regions").length == 1) {
            $(".all-regions").toggle(0).find(".search-region_row").focus();
        }
    });
    $(".region_item").click(function(event) {
        $(".all-regions").toggle(0).find(".search-region_row").focus();
    });

Answer 1

Ну считай, что они соединены по дефолту, все элементы DOM располагаются в document тем, или иным образом.

Небольшой сниппет, с доработанным ответом с engSO:

$(window).click(function() { 
  $('#menucontainer').hide();//Обрабатываем клик ВНЕ меню 
}); 
$(document).on('click','.someControl', function(event){ 
  $('#menucontainer').show();//Обрабатываем клик на элементы управления, вызывающие меню 
  event.stopPropagation();//Убираем дальнейшее дефолтное поведение 
}) 
 
$('#menucontainer').click(function(event) { 
  event.stopPropagation();//обрабатываем клик внутри меню 
});

.wrapper{ 
  height: 100%; 
  width: 100%; 
} 
#menucontainer{ 
  background: whitesmoke; 
  position: fixed; 
  top: calc(50% - 80px); 
  left:calc(50% - 100px); 
  display: flex; 
  flex-direction: column; 
  padding: 40px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type='button' value='ShowDialog' class='someControl'/> 
<div class='wrapper'> 
  <div id='menucontainer'> 
    <input type='text' value='SomeTextHere' /> 
    <input type='button' value='Close' onclick='$(this).parent().hide()'/> 
  </div> 
</div>