Эффект jQuery-UI – событие двойных триггеров

Пытаясь решить эту проблему в течение длительного времени, jsfiddle не будет повторно воспроизводить этот код, чтобы показать проблему.

Событие ‘click’ запускается дважды в элементе, который ранее обрабатывался с помощью hide () и show (‘slide’).

Не происходит при использовании show() или fadeIn(1000) ; Не происходит при перемещении обработчика события внутри $(document).ready(){} .

Я должен использовать эту точную структуру с внутри элемента. Я не могу это изменить.

          $(document).ready(function() { $('#container').hide().delay(750).show('slide'); });    
Download
$('.download').click(function() { alert('Trigger'); });

Я понимаю, что show() снова запускает внутри , привязывая одно и то же событие.

Есть ли обходной путь? знак равно

Пожалуйста помоги. Благодарю.

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

 $('.download').one('click', function() { alert('Trigger'); }); 

Или, удаляйте обработчик (ы) каждый раз с помощью .off() :

 $('.download').off('click').on('click', function() { alert('Trigger'); }); 

Это также можно записать в синтаксисе delegate прикрепленном к #container или body :

 $('body').off('click', '.download').on('click', '.download', function() { alert('Trigger'); }); 

Демо: http://jsfiddle.net/QnfMZ/1/

Причина этого в том, что пользовательский интерфейс jQuery использует вспомогательные элементы для создания переходов. Они поддерживают правильную компоновку и т. Д. Во время анимации. Эти вспомогательные элементы создаются с помощью clone() который копирует html элемента, что в вашем случае означает, что он также копирует скрипт. Затем запускается скрипт, добавив второй обработчик. После того, как переход завершен, хелпер-клон удаляется, но у вас все еще остается дополнительный обработчик.