사용자가 외부를 클릭 할 때 jQuery를 사용하여 DIV를 숨기는 법.

 

질문 : 사용자가 외부를 클릭 할 때 jQuery를 사용하여 DIV를 숨 깁니다.

---

이 코드를 사용하고 있습니다.

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

그리고이 HTML :

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

div 내부에 링크가 있고 클릭했을 때 더 이상 작동하지 않는다는 것입니다.

반응형

답변

---

똑같은 문제가 있었는데이 쉬운 해결책을 내놓았습니다. 재귀 적으로 작동합니다.

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

출처 : https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it