Событие щелчка Jquery - для запуска требуется два щелчка

Это может быть очень просто, но я изо всех сил пытаюсь понять, что происходит.

На скрипте JS: http://jsfiddle.net/3hHAX/

Есть две ссылки на «Открыть модальное видео».

Как следует из текста ссылки, эти две ссылки должны открывать всплывающее окно модели с содержащимся в нем видео YouTube.

Здесь используется библиотека prettyphoto из: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

По какой-то причине событие клика не срабатывает при первом клике. Но работает на секунду.

(Не включал CSS, поэтому выглядит не очень модально, но вы увидите загрузку контента ниже, по крайней мере, для демонстрации).

Кто-нибудь может подсказать, что происходит не так?

Спасибо,

Стив


jquery onclick eventtrigger
person steve    schedule 02.04.2012    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Инициируйте событие щелчка после его инициализации и разрешите его инициализацию только один раз.

(function($) {    
    $(".watch-this a, .field-name-field-embed-code a").live('click',function(){
        if (!$(this).is(".pPhoto")) {
            $(this).prettyPhoto({
                social_tools: ''
            }).addClass("pPhoto").click();     
        }
        return false;    
    });
})(jQuery);

Демо: http://jsfiddle.net/3hHAX/3/

Изменить для уточнения:
Это очень распространенный способ инициализации плагина для динамических элементов. Как уже отмечалось, лучше инициализировать на dom ready, если ваши элементы не являются динамическими.

Примечание.
.live устарело, вам действительно следует использовать .on

(function($) {    
    $(document).on("click",".watch-this a, .field-name-field-embed-code a",function(){
        if (!$(this).is(".pPhoto")) {
            $(this).prettyPhoto({
                social_tools: ''
            }).addClass("pPhoto").click();     
        }
        return false;    
    });
})(jQuery);
person Kevin B    schedule 02.04.2012

arrow_upward
1
arrow_downward

Спасибо, парни,

Оба ответа помогли мне в конечном итоге решить эту проблему.

Завершить решение в обновленном JSFiddle:

http://jsfiddle.net/3hHAX/6/

Кажется, prettyPhoto прикрепляет свое собственное событие к клику, и его просто нужно применить к этим элементам dom.

Спасибо, Стив

person steve    schedule 03.04.2012

arrow_upward
0
arrow_downward

  • Прежде всего, никогда не используйте метод live в jquery, за исключением ситуаций, когда дом действительно находится вне вашего контроля. По крайней мере, вы должны использовать функцию делегата, так как живая функция вызовет много замедления и много проблем (хотя на этот раз это не было ошибкой)
  • Во-вторых, событие click срабатывает, как вы можете видеть здесь, но компонент prettyPhotos не работает в первый раз по неизвестным мне причинам, но, как вы можете видеть в предыдущей ссылке jsfiddle, он действительно работает с предупреждением при первом нажатии, поэтому для меня это звучит как ошибка в prettyphotos script (который Кевин Б., кажется, решает по-хакерски, вызывая событие второго щелчка).
person David Mulder    schedule 02.04.2012
comment
.on теперь используется вместо .live, и если элемент загружается динамически, используйте .on, dom никогда не должен выходить из-под вашего контроля. Не уверен, что вы имели в виду под этим утверждением. - person SSH This; 26.11.2013