jquery нажмите () за пределами div, чтобы закрыть div

Question

Html

<div class="lang-currency-field">
   <div class="lang-currency-links">links here</div>
</div>

jQuery

<script>    
     $('.lang-currency-button').click(function() {
         $('.lang-currency-field').fadeIn();
     });    

     $('.lang-currency-links').click(function() {
        $('.lang-currency-field').fadeOut();
     });    

     $('.lang-currency-field').outside('click', function(){
         $('.lang-currency-field').fadeOut();
     });    
</script>        

Я читал здесь много статей и форумов по stackoverflow, но я не могу 'Разберитесь с этим по некоторым причинам.

Как я могу закрыть / исчезнуть div lang-currency-field div, щелкнув где-нибудь на странице?

Он закрывается нормально, когда я нажимаю на одну из ссылок, но не когда я фактически щелкаю из div.

Не могли бы вы помочь мне, пожалуйста?Спасибо.

Answer 1

Я бы предложил обработчик для div, который предотвращает всплытие событий, а затем делегировал бы «внешний» обработчик документу.Обработчик в div предотвращает клики внутри div, но не по ссылке, чтобы обработчик уровня документа закрывал div.Примечание: вам нужно быть осторожным с другими обработчиками для страницы, которые позволяют либо кликам всплывать в документе (если вы закрываете div, либо они также заботятся о закрытии div, либоВы полностью переходите на другую страницу (чтобы не нужно было закрывать div).Если вы остановите распространение в обработчиках для элементов вне div, обработчик уровня документа не будет вызван.

<script>
     $(function() { // this will make sure the relevant DOM elements are loaded first   
        $('.lang-currency-button').click(function(e) {
            e.stopPropagation(); // because we don't want to close immediately after opening
            $('.lang-currency-field').fadeIn();
        });    

        $('.lang-currency-links').click(function(e) {
           e.stopPropagation(); // prevent bubbling since we don't need other handlers.
           $('.lang-currency-field').fadeOut();   
        });    

        $('.lang-currency-field').click(function(e){
            e.stopPropagation(); // prevent bubbling to document handler so div stays open when clicked inside, but not on a link
        });

        $(document).click(function() {
            $('.lang-currency-field').fadeOut();
        });
     });  
</script>

Answer 2

Попробуйте

 $('page').click(function() { $('.lang-currency-field').fadeOut(); });