« Choose a code sample to apply to the <div>s above.
This example shows clicks that propagate up the parent chain, and the handler is called at each layer. If you click inside the innermost div (".layer4"), all the divs will toggle green.
$('#demo_box')
.delegate('click','.box',function(){
$( this ).toggleClass('green');
});
This example shows clicks that do not propagate up the parent chain, and the handler is called only at each click. If you click inside the innermost div (".layer4"), only that div will toggle green.
$('#demo_box')
.delegate('click','.box',function(){
$( this ).toggleClass('green');
return false;
});
This example shows that you can delegate multiple comma-seperated selectors with any given handler. Clicks within ".layer1" or ".layer3" will toggle that layer green and propagate to the next layer. The remaining layers will toggle red, and will not propagate.
$('#demo_box')
.delegate('click','.layer1, .layer3',function(){
$( this ).toggleClass('green');
})
.delegate('click','.layer0, .layer2, .layer4',function(){
$( this ).toggleClass('red');
return false;
});
This example shows that you can delegate multiple space-seperated events to multiple selectors with a single handler. The result of delegating these two events, is mimicking mouseenter and mousleave behavior. When moving onto the child element, the mouseout event propagates and then the mousover event propagates immediately after, so in appearance they cancel each other out.
$('#demo_box')
.delegate('mouseover mouseout','.layer0, .layer1, .layer2, .layer3',function(){
$( this ).toggleClass('blue');
});
This example shows that you can undelegate multiple space-seperated events from multiple selectors, in any order. The only remaining delegation is "mouseover" on ".layer0"
$('#demo_box')
.delegate('mouseover mouseout','.layer0, .layer1, .layer2',function( event ){
$( this ).toggleClass('blue')
})
.undelegate('mouseover mouseout','.layer1, .layer2')
.undelegate('mouseout');