документ .на клик умножается

0

У меня есть основная функция для выпадающих кнопок, которые часто загружаются через AJAX. Основная идея - нажать кнопку, чтобы переключать видимость в раскрывающемся списке. Эта часть работает. Но я также хочу, чтобы раскрывающийся контент исчезал при нажатии в другом месте на странице. Вот код:

 $(document).on({
     click: function() {

         var contentHolder = $(this).siblings("[class^=holder_dropdown]");

         if ($(contentHolder).is(":visible")) {

             // hide drop down
             $(contentHolder).hide();

         } else {

             // show drop down
             $(contentHolder).show();

             $(document).on({
                 click: function hideOnClick() {

                     console.log("clicked");
                     $(contentHolder).hide();
                     $(document).off('click', hideOnClick);

                 }
             });

         }

     }

 }, "[class^=dropdown]");

Он работает нормально, так как он в том смысле, что нажатие в другом месте страницы закрывает выпадающее меню. Тем не менее, я вижу, записывая в консольный журнал, что он продолжает делать это даже после того, как выпадающее меню скрыто, что каждый дополнительный щелчок на странице до перезагрузки. Это станет поглотителем памяти для моего сайта, так как потенциал для этого расширяется и увольняется за 100 секунд.

Что мне не хватает?

  • 1
    Для того, чтобы отслеживать фокус можно также использовать blur focus focusin и focusout события
Теги:

4 ответа

0
Лучший ответ

Вы связываете обработчик события внутри другого обработчика события. Обработчики событий не заменяются, они добавляются. Итак, дважды щелкнув эти два элемента, вы добавили два обработчика событий, которые несут ответственность за скрытие выпадающих списков.

Убедитесь, что вы снова отсоедините обработчик событий:

function hideOnClick() {
    if ($(contentHolder).is(":visible")) {
        // hide drop down

        $(contentHolder).hide();
        console.log("dropdown hidden");

    }
    $(document).off('click', hideOnClick);
}

$(document).on('click', hideOnClick);
Поделиться
  • 0
    Понял, спасибо!
0

Ваш код должен выглядеть так:

$(document).ready(function(){
    js_Codes();

    /* The rest of your code that will not reload after ajax request */

});

$(document).ajaxComplete(function(){
    /* Here we call the codes that will reload after your ajax request */
    js_Codes();
});

function js_Codes(){

    function clickOpenDialog(){
        $('.btOpenDialog').off('click',clickOpenDialog);
        fn_open_Dialog_Click($(this).prop('alt'), function(){$('.btOpenDialog').on('click',clickOpenDialog);});
        return false;
    };

    function fn_Open_Dialog_Click(myString){
        var myArray = myString.split(';');
        /* whatever u want with your page with a string param array */

    };

    $('.btOpenDialog').on('click',clickOpenDialog);
}

Наслаждайтесь этим. =]

Поделиться
0

Вам нужно использовать .on( "blur", handler ). Он срабатывает только один раз, когда выпадающее меню выходит из фокуса.

Поделиться
  • 0
    размытие не сработает, поскольку фокус находится на кнопке, а не на выпадающем держателе
0 
$("*[class^='dropdown']").on("click", function(){});
Поделиться
  • 0
    Какое отношение имеет проблема к делегированию событий? Как вы думаете, почему не использование делегирования событий решает проблему?
  • 0
    синтаксис $ (ELEMENT) .on ("THE_EVENT", function () {});
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню