event.stopPropagation() not working in chrome with jQuery 1.7

Question

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>

Spindrift

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 – Spindrift

Answer 1

Try event.stopImmediatePropagation

Refer documentation

Waggoner

Thanks, I didn't know about that. On which event should I use this? Both? I will experiment. – Spindrift

thanks man.. stoppropagation was not working for me.. this thing works fine.. thanks again – Wiggins

Answer 2

jquery 1.6.4 suffer the same bug. Resolved using stopImmediatePropagation.

Reimpression