На этом шаге мы рассмотрим метод, позволяющий повторно подключать обработчик события.

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

    Сначала нам следует присвоить имя функции обработчика, чтобы ее можно было использовать многократно, не повторяя ее программный код:

 $(document).ready(function() {
   var toggleStyleSwitcher = function(event) {
     if (!$(event.target).is('.button')) {
       $('#switcher .button').toggleClass('hidden');
     }
   };
   
   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
 });

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

    Кроме того, метод .bind() во втором аргументе принимает ссылку на функцию. Важно запомнить, что при использовании здесь именованной функции следует опускать круглые скобки после имени функции; круглые скобки приведут к немедленному вызову функции, тогда как нам требуется всего лишь передать ссылку на нее.

    Теперь, когда функция имеет имя, мы сможем подключить ее снова позднее, не повторяя определение функции:

 $(document).ready(function() {
   var toggleStyleSwitcher = function(event) {
     if (!$(event.target).is('.button')) {
       $('#switcher .button').toggleClass('hidden');
     }
   };
   
   $('#switcher').bind('click.collapse', toggleStyleSwitcher);
   
   $('#switcher-narrow, #switcher-large').click(function() {
     $('#switcher').unbind('click.collapse');
   });
   $('#switcher-default').click(function() {
     $('#switcher').bind('click.collapse', toggleStyleSwitcher);
   });
 });

Рис.1. Функция свертывания/развертывания подключается по щелчку на кнопке Обычный

    Теперь функция свертывания/развертывания подключается к переключателю во время загрузки документа, отключается в случае щелчка на кнопке Суженный или Увеличенный и повторно подключается в случае щелчка на кнопке Обычный.

    Мы сумели обойти здесь потенциальную ошибку. Вспомним, что когда обработчик подключается к событию с помощью jQuery, предыдущий обработчик продолжает действовать. Казалось бы, это означает, что в случае выполнения нескольких щелчков на кнопке Обычный будет подключено несколько копий обработчика toggleStyleSwitcher, что приведет к необычному поведению при щелчке в пределах элемента <div>. В действительности, если бы мы использовали анонимную функцию, то так оно и было бы. Но поскольку мы присвоили функции имя и все время используем одну и ту же функцию, эта функция будет подключена всего один раз. Метод .bind() не выполняет повторное подключение обработчика к элементу, если он уже подключен.

    Еще одно преимущество использования именованной функции заключается в том, что нам больше не требуется использовать определение пространства имен для событий. Метод .unbind() может принимать функцию во втором аргументе, в этом случае он отключает только указанный обработчик.

 $(document).ready(function() {
   var toggleStyleSwitcher = function(event) {
     if (!$(event.target).is('.button')) {
       $('#switcher .button').toggleClass('hidden');
     }
   };
   
   $('#switcher').click(toggleStyleSwitcher);
   
   $('#switcher-narrow, #switcher-large').click(function() {
     $('#switcher').unbind('click', toggleStyleSwitcher);
   });
   $('#switcher-default').click(function() {
     $('#switcher').click(toggleStyleSwitcher);
   });
 });

Рис.2. Исправленный вариант

    Для ситуации, когда обработчик события должен отключаться после первого срабатывания, имеется специализированный метод подключения. Этот метод называется .one(), а порядок его использования приводится ниже:

$(document).ready(function() {
  $('#switcher').one('click', toggleStyleSwitcher);
});

    Этот программный код позволил бы выполнить операцию переключения всего один раз.

    На следующем шаге мы рассмотрим имитацию действий пользователя.

Предыдущий шаг Содержание Следующий шаг