JSFiddle - React, Tailwind, and code Playground

by Ben Alman

HTML

<!-- http://benalman.com/ -->

<p>Broken in jQuery 1.4.2, but <a href="http://bit.ly/butatF" target="_blank">fixed in 1.4.3</a>!</p>

<p>Ideally, the live event would propagate from div#a -&gt; div#b -&gt; div#c and then stop.</p>

<div id="log"></div>

<br>
<a href="http://jsfiddle.net/cowboy/DpQm9/" target="_top">Try in jQuery 1.4.3pre nightly</a>

<div id="d">
    <div id="c">
        <div id="b">
            <div id="a"></div>
        </div>
    </div>
</div>

CSS

p {
    margin-bottom: 1em;
}

JavaScript

function log(){
    $('#log').append([].join.call(arguments,', ')+'<br/>');
};

log( 'jQuery ' + $.fn.jquery );

function log_stuff( elem, e ){
    if ( elem.id == 'a' ) { log(); }
    log( 'this: ' + elem.tagName.toLowerCase() + '#' + elem.id
         + ' (event.target: ' + e.target.tagName.toLowerCase() + '#' + e.target.id + ')' );
};

function handler(e){
    log_stuff( this, e );
    if ( this.id == 'c' ) {
        e.stopPropagation(); // won't stop propagation in 1.4.2
    }
};

// FOO

// live event doesn't 'propagate' like this in 1.4.2:
$('body,div').live( 'foo', handler );

$('#a').trigger('foo');

// BAR

// live event will only 'propagate' in 1.4.2 like this:
$('#a').live( 'bar', handler );
$('#b').live( 'bar', handler );
$('#c').live( 'bar', handler );
$('#d').live( 'bar', handler );
$('body').live( 'bar', handler );

$('#a').trigger('bar');