5

For some reason clicking the document isn't working in Chrome (the closeQuickView is not being called).

The elements are loaded via AJAX and so need to have .on() action (previously .live() which is now deprecated in jQuery 1.7)

Used the example given here: How do I detect a click outside an element? as a basis

$('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');
    }

My markup is as follows:

<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>
Community
  • 1
  • 1
Craig
  • 972
  • 3
  • 13
  • 38
  • The figures are wrapped in a #content div which is the subject of the AJAX loading. I added an inner wrapper div, cleared the cache and it seems to be working now :S – Craig Nov 05 '11 at 17:32

2 Answers2

8

Try event.stopImmediatePropagation

Refer documentation

BomberMan
  • 1,094
  • 3
  • 13
  • 33
Sam
  • 15,336
  • 25
  • 85
  • 148
0

jquery 1.6.4 suffer the same bug. Resolved using stopImmediatePropagation.

giop
  • 1