Скрыть div при клике вне элемента

@Hrommi · Регистрация: 19.02.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Для показа div'а и его скрытия при клике вне его границ использую вот такой код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function(){
    $('#callback a').click(function(){
        $( ".all-screen-call" ).fadeIn( 'slow' );
        var $message = $('.all-screen-call');
        var firstClick = true;
        $(document).bind('click.myEvent', function(e) {
            if (!firstClick && $(e.target).closest('.all-screen-call').length == 0) {
            $message.fadeOut( "slow" );
            $(document).unbind('click.myEvent');
        }
        firstClick = false;
        });
    });
    $('#all-screen-callback-title a').click(function(){
        $( ".all-screen-call" ).fadeOut( 'slow' );
    });
});

Так же имеется ссылка на самом div'е, которая его скрывает. Но если закрыть div с ее помощью, то при последующем клике для показа, div просто появляется на секунду и тут же скрывается. Я так понимаю это происходит из-за переменной firstClick, но различные манипуляции с ней мне не помогли. Как исправить данную проблему?

@Soldado · 06.07.2013, 20:42

Для ссылки

JavaScript
1
2
3
4
$('#all-screen-callback-title a').click(function(ev){
ev.stopPropagation() ;// клик только по верхнему элементу - ссылке, ниже клик не распостраняется
        $( ".all-screen-call" ).fadeOut( 'slow' );
    });

@Hrommi · 07.07.2013, 09:33 **[ТС]**

Soldado, Ваш вариант не работает. Оказывается нужно так, может кому пригодится.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
    $('#callback a').click(function(){
        $( ".all-screen-call" ).fadeIn( 'slow' );
        var $message = $('.all-screen-call');
        var firstClick = true;
        $(document).bind('click.myEvent', function(e) {
            if (!firstClick && $(e.target).closest('#all-screen-callback').length == 0) {
                $message.fadeOut( "slow" );
                $(document).unbind('click.myEvent');
            }
            firstClick = false;
        });
    });
    $('#all-screen-callback-title a').click(function(){
        $(document).unbind('click.myEvent');
        $( ".all-screen-call" ).fadeOut( 'slow' );
    });
});

@Areopagite · 19.02.2015, 16:13

Hrommi, cпасибо огромное!
Вставить строку

JavaScript
1
$(document).unbind("click.myEvent");

при обработке нажатия на кнопку внутри появившегося div'a помогло мне решить аналогичную проблему.

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .