JQuery - Триггер Нажмите внутри Fancybox - PullRequest
Новая
       15

JQuery - Триггер Нажмите внутри Fancybox

1 голос
/ 19 декабря 2011

У меня есть страница, которая будет всплывать fancybox с использованием 

$('#showpopup').fancybox().trigger('click');

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

Во всплывающем окне есть кнопка, которая запускает действие при нажатии 

$('#mybutton').click(function(){

   $('#otherbutton').trigger('click');

});

Когда всплывающее окно fancybox отображается впервые, я нажимаю #mybutton, и #otherbutton запускается один раз.

Когда всплывающее окно fancybox показывает второй раз, когда я нажимаю #mybutton и дважды запускается #otherbutton.

Когда всплывающее окно fancybox показывает в третий раз, я нажимаю #mybutton, и кнопка #otherbutton запускается три раза.... и т. д.

Как я могу остановить эту проблему с помощью fancybox, чтобы другие кнопки сработали только один раз?

1 Ответ

2 голосов
/ 19 декабря 2011

Похоже, вы связываете обработчик события click для элемента #mybutton в событии Fancybox (onStart, onComplete и т. Д.).

Два способа исправить это:

  1. На событиях onClosed или onCleanup можно отсоединить обработчик событий click для элемента #mybutton: $('#mybutton').unbind('click');. Таким образом, они не будут накапливаться и запускаться несколько раз за один клик.
  2. Вы можете переместить $('#mybutton').click(function(){$('#otherbutton').trigger('click');}); за пределы любого обработчика событий Fancybox (если кнопка не присутствует в DOM, пока не отобразится Fancybox, вы можете использовать .delegate(), чтобы связать обработчик событий click с этой кнопкой). $(document).delegate('#mybutton', 'click', function () {...}) (обратите внимание, что вы можете изменить document на любой корневой элемент, который присутствует в DOM во время привязки).

Docs:

Я также заметил, что вы ссылались на старую версию Fancybox, если вы используете 1.x, тогда я предлагаю изменить на 2.0: http://fancyapps.com/fancybox/

...