Как вызвать событие при произвольном вызове функции с помощью jQuery - PullRequest
Новая
       4

Как вызвать событие при произвольном вызове функции с помощью jQuery

2 голосов
/ 27 октября 2010

Мне интересно, возможно ли использовать jQuery bind () для запуска пользовательского события при вызове произвольной функции.Примерно так: 

/* when cmsPlugin.func() is called, fire myCustom.func() too */
$.bind( cmsPlugin.func, myCustom.func );

Мы используем плагин Lightbox2 для Drupal на сайте.

Когда отображается лайтбокс, я хочу запустить какой-то пользовательский код, который будет прикрепляться к кликам нассылка «скачать» в Lightbox.

Плагин Lightbox2, по-видимому, не вызывает $ .trigger (), поэтому у меня есть несколько вариантов -

  • Найти способпривязка к вызовам функций JavaScript.(В этом случае Lightbox.end, я полагаю.)
  • Использовать существующее событие, например, $ (document) .ready, которое может (?) Запускаться как часть отображения лайтбокса.
  • Расширьте существующую функцию, добавив вызов $ .trigger ().
  • Просто несколько раз ударьте myCustom.func () некоторое время после того, как обнаружите, что щелкающий элемент лайтбокса был нажат.(Ewww.)
  • __ _ __ _ __ ?

Решение

Я попытался упростить свой вопрос с помощью cmsPlugin.func / myPlugin.func, но думаю, что мог запутаться в этом.Тем не менее, я надеюсь, что опубликованные решения будут достаточно общими для будущих читателей, чтобы они могли сами себя использовать.

Спасибо Адаму и Лучо.Мне не повезло с предложением Лучо, но я подозреваю, что это была моя вина, а не Лучо:)

Сначала я попробовал пример кода Лучо, модифицировав его для запуска Drupal.zipcart.init ()когда Lightbox.updateNav был выполнен.Это не сработало для меня.

Я решил расширить Lightbox.updateNav (), потому что это была простая функция, вызываемая поздно в методе отображения Lightbox2.

Моя попытка изменить код Лучо выглядела каквот так, но не сработало - 

// NOT THE RIGHT SOLUTION (for me)
Lightbox.updateNav = function(_dz, _lb) { return function() {
        _lb.updateNav();
        _dz.init();
    };
}(Drupal.zipcart, Lightbox);

Вот код, который я в итоге использовал, основываясь на ответе Адама, который позволяет модулям Drupal ZipCart и Lightbox2 играть хорошо вместе, делая ссылки с class = "zipcart" в лайтбокс правильно добавить файлы в корзину загрузки. 

(function(){
  var _updateNav = Lightbox.updateNav;
  Lightbox.updateNav = function () {
    $(document).bind('lightbox.updateNav', function() {
      Drupal.zipcart.init();
    });
    $("#lightbox").trigger('lightbox.updateNav');
    _updateNav.apply(this, arguments);
  }
})();
$(document).bind('lightbox.updateNav', function () { Drupal.zipcart.init(); });

Ответы [ 2 ]

3 голосов
/ 28 октября 2010

Вы не можете привязать слушателей событий к функции. События связаны и запускаются с узлов DOM, поэтому вам нужно знать, как выбрать разметку лайтбокса. jQuery позволяет делать это сейчас, но вам все еще нужна оболочка для запуска события.

Самым чистым способом достижения этой цели было бы обернуть функцию Lightbox.updateNav и запустить собственное событие. 

(function(){
  var _updateNav = Lightbox.updateNav;

  Lightbox.updateNav = function () {
    $("#lightbox").trigger('lightbox.updateNav');
    _updateNav.apply(this, arguments);
  }
})();

#lightbox должен указывать на разметку лайтбокса, с которой вы можете связать прослушиватели событий. Я не знаю достаточно об API LightBox2, чтобы сказать вам, как именно это сделать.

Это лучше, чем простая функция-обертка, потому что вы можете подключить столько слушателей, сколько захотите. 

$("#lightbox").bind('lightbox.updateNav', function() {})

Поскольку разметка лайтбокса, вероятно, создается и уничтожается динамически, вам лучше использовать delegate (при условии, что у вас есть доступ к jQuery 1.4.2). Если вы можете определить, куда вставлена ​​разметка, присоедините делегат к родительскому элементу: 

$('#lightbox-parent').delegate('#lightbox', 'lightbox.updateNav', function() {})

Это намного лучшая производительность, чем .live(), поэтому я бы порекомендовал сделать это так, если вы можете.

0 голосов
/ 27 октября 2010 
cmsPlugin.func = function(myCustom, cmsPlugin) { return function() {
        cmsPlugin.func();
        myCustom.func();
    };
}(myCustom, cmsPlugin);
...