Question

If I have some elements like:

<div class="one">
    <div class="two">
    </div>
</div>

and I want to do something when a user clicks one but NOT two:

$('.one:not(.two)').live('click', function(){
            console.log('jazz');     
        });

But it still does the console log… because the element is nested! How do I fix this?

Answer 1

I’d prefer to bind a separate click event to two, to tell browser to stop event bubbling, imho, it’s much more readable that way:

$('.one').click(function() {
   console.log('jazz');
})
.find('.two').click(function(e) {
   e.stopPropagation();
});