Расположение элемента в поле «Facebox»

Question

Вот моя ссылка:

http://tinyurl.com/6j727e

Если вы нажмете на ссылку в test.php, она откроется в модальном окне, в котором используется скрипт jquery 'facebox'.

Я пытаюсь воздействовать на событие щелчка в этом окне, и если вы просмотрите исходный файл test.php, вы увидите, где я пытаюсь заблокировать ссылку в модальном окне.

    $('#facebox .hero-link').click(alert('click!'));

Однако он не обнаруживает щелчок, и, как ни странно, событие щелчка запускается при загрузке страницы.

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

Кто-нибудь может помочь? Как правило, это самая последняя часть проекта, и она держит меня, как всегда, всегда;)

Answer 1

Во-первых, вы получаете предупреждение о загрузке документа, потому что метод #click принимает функцию в качестве аргумента. Вместо этого вы передали ему возвращаемое значение alert, которое немедленно отображает диалоговое окно с предупреждением и возвращает ноль.

Причина, по которой привязка событий не работает, заключается в том, что во время загрузки документа #facebox .hero-link еще не существует. Я думаю, у вас есть два варианта, которые помогут вам это исправить.

Вариант 1) Привязать событие щелчка только после того, как будет открыт лицевой ящик. Что-то вроде:

$(document).bind('reveal.facebox', function() {
  $('#facebox .hero-link').click(function() { alert('click!'); });
});

Вариант 2) Изучите использование jQuery Live Query Plugin

Live Query использует всю мощь селекторов jQuery, автоматически связывая события или вызывая обратные вызовы для сопоставленных элементов, даже после загрузки страницы и обновления DOM.

jQuery Live Query автоматически связывает событие click, когда распознает, что Facebox изменил DOM. Вам нужно только написать следующее:

$('#facebox .hero-link').click(function() { alert('click!'); });

Answer 2

В качестве альтернативы используйте делегирование события

Это в основном перехватывает события в контейнерах, а не в каждом элементе, и запрашивает event.target в событии контейнера.

Он имеет несколько преимуществ в том, что вы уменьшаете шум кода (нет необходимости перепривязывать), он также облегчает работу памяти браузера (меньше событий, связанных в DOM)

Быстрый пример здесь

Плагин jQuery для легкого делегирования событий

Делегирование событий P.S запланировано на следующую версию (1.3), которая будет выпущена очень скоро.