У меня есть 'Back Board' на моих изображениях и контенте здесь:http://syndex.me Таким образом, в основном, вы нажимаете на изображение, оно будет перекрывать информационную панель над кликаемым контентом.

Я хочу сделать две вещи:

Нажмите на фон сайта, чтобы исчезнуть в настоящее время открытая информационная панельУметь нажимать на тег, ссылку или значок социальной сети.в информационная панель без вызова родительской функции, которая снова исчезает.

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

Я не могу просто сказать что-то вроде: $ ("# Background"). Click (function () {// fade out Info Board}, потому что это покрывается всей оболочкой поста, и я не могу поместить событие в шапку потому что тогда я еще глубже в дилемме родителей брать на себя детские мероприятия :-)

Пока у меня есть хотя бы одна открытая информационная панель (т.е. я нажимаю на одно изображение, затем на другое, оно закрывает уже открытое и открывает текущее. Так что эта часть хороша:

    $('.theContent:not(.clicked)').live("click", function () {
            $(this).children('.postInfo').fadeIn(400);
            $(".clicked").each(function() {
                    $(this).find('.postInfo').fadeOut(400);
                    $(this).removeClass('clicked');
            });
        $(this).addClass("clicked");
 });
     $('.clicked').live("click", function () {
            $(".clicked").each(function() {
                $(this).find('.postInfo').fadeOut(400);
                $(this).removeClass('clicked');
            });
 });

Re .live (), .delegate () и .stopPropogation ():

Поскольку метод .live () обрабатывает события после их распространения в верхнюю часть документа, невозможно остановить распространение живых событий. Аналогично, события, обрабатываемые .delegate (), распространяются на элементы, которым они делегированы; обработчики событий, связанные с любыми элементами ниже этого в дереве DOM, уже будут выполнены к тому времени, когда будет вызван делегированный обработчик событий Следовательно, эти обработчики могут препятствовать запуску делегированного обработчика путем вызова event.stopPropagation () или возврата false.