С помощью jQuery 1.7 .на() и событие.это происходит, чтобы закрыть коробок при нажатии в документе тело


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

Элементы загружаются через AJAX и так нужно .на() (ранее .жить(), который является теперь устаревшим в jQuery 1.7).

Я использовал пример, приведенный здесь в качестве основы.

$('html').on('click', '.poster:not(.active) .image-effect', function (event) {

        var obj = $(this).parent();

        // If there are no .close spans
        if (obj.find('.close').length === 0) {

            // Add the close element by javascript to remain semantic
            obj.find('.quick-view').append('<span class="close">&times;</span>');
        }

        // Close any open Quick Views
        closeQuickView();

        // Add the active class (controls opacity)
        obj.addClass('active');

        // Fade in the Quick View
        obj.find('.quick-view').fadeIn(200, 'easeInOutQuint');

        event.preventDefault();
        event.stopPropagation();

    });

    $('html').on('click', '.active', function () {
        return false;
    });

    $('html').on('click', '.close', function () {
        closeQuickView();
    });

    $('html').on('click', '.quick-view', function (event) {
        event.stopPropagation();
    });

    // Close the QuickView with a button
    $('html').on('click', function () {
        closeQuickView();
    });

    function closeQuickView() {
        $('.poster').removeClass('active');
        $('.quick-view').fadeOut(200, 'easeInOutQuint');
    }

Почему-то нажав на документ не работает в Chrome (в closeQuickView не называется), который может быть показателем того, что код не работает 100%.

Моя разметка выглядит следующим образом:

<figure class="grid_2 box poster">
    <a class="image-effect" href="#">
        <img class="colour" src="path/to/image" />
        <img class="bw" src="path/to/image" />
    </a>
    <div class="quick-view">

        Content

    </div>
</figure>

Это правильный путь, чтобы приблизиться к сценарию? Есть ли какие противоречивые функции?



2096
3
задан 5 ноября 2011 в 05:11 Источник Поделиться
Комментарии
1 ответ

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

$('html').on('click', '.poster', function(e) {

var target = $(e.target);
var poster = $(this);

if (!poster.hasClass('active')) {
closeQuickView();
poster.addClass('active').find('.quick-view').fadeIn(200);
}
if (target.hasClass('quick-view') || target.hasClass('image-effect')) e.stopPropagation(); // prevent bubbling and thus closeClickView call below
});

$('html').on('click', closeQuickView);

Таким образом, это более лаконично и, надеюсь, понятнее, чем заниматься.

PS: Я выбросил условный.- закрой довесок здесь, ничего плохого с ней в ванили HTML я бы сказал.

2
ответ дан 8 ноября 2011 в 02:11 Источник Поделиться