Prevent bubbling?

Question

I'm not sure if this is really bubbling, I will explain.

I have it:

<div> <div> text here </div> </div> 

How to bind an on click event so that it affects only the closed div? If I installed it like this:

 jQuery('div').bind('click', function() { jQuery(this).css('background','blue'); }); 

it makes all divs blue. If I add false as the third argument (prevent popup) to the binding function, it does nothing.

How can i solve this?

Answer 1

http://api.jquery.com/event.stopPropagation/

Add event.stopPropagation(); inside the hander.

(It’s better, however, to assign an identifier or class to a nested DIV, so you can make sure that this is the only thing that affected.)

Answer 2

You really should use identifiers such as identifiers or classes, but for your example you can do this:

 jQuery('div > div').bind('click', function() { jQuery(this).css('background','blue'); }); 

... which associates a handler with any div that is a direct descendant of another div .

Thus, either make your initial choice specific to the elements (s) you want to influence, or use delegation delegation, place a handler on the ancestor and check the element you want.

Delegation example: http://jsbin.com/ehemac/edit#javascript,live

 <div id="container"> <div class="outer"> <div> text here </div> </div> <div class="outer"> <div> text here </div> </div> </div> 

 jQuery('#container').delegate( '.outer > div', 'click', function() { jQuery(this).css('background','blue'); }); 

The delegate() ^[docs] method is used here, which places the handler on the ancestor with the identifier #container .

The first argument to .delegate() is a selector. Any elements pressed inside the #container will have this selector compared to the pressed element. If the selector matches, a handler will be called.

Answer 3

http://jsfiddle.net/vol7ron/WzSkj/

Orientation of the last descendant

Credit Patrick DW :

 jQuery('div:not(:has(div))').bind('click', function() { jQuery(this).css('background','blue'); }); 

That should be all you need as it will look at all the div and find those that don't have child divs (so they will be the last descendant of this type of element. You can additionally filter this to make sure they have a parent, which is a div if you want to exclude those div that are autonomous.

---

Old answer:

This in no way means that it is a complete / reliable plugin. It serves only as an example of how to target the last element in a chain. See Change History for a way to do this without a plugin. This must be changed if you want to use it for production.

Plugin:

 (function($){ $.fn.lastDescendant = function(el){ var found = jQuery(el + ':first').siblings(el).andSelf(); var prev, curr; var stack = this; for (var i=0,n=found.length; i<n; i++){ curr = found.eq(i).find(el); while (curr.length){ prev = curr; curr = curr.find(el); } stack = stack.add(prev); } return stack; }; })( jQuery ); 

Call example:

 jQuery.fn.lastDescendant('div') .click(function(){ jQuery(this).css("background","#09c"); }); 

Note:

• this item will not be selected first (ancestor). If you also want to select this, you can wrap it all in a new div , and then do it.
• If I made this a production plugin, I would enable parameter checking and let you pass the object and the starting point (so that siblings are not selected)

Answer 4

To fix this, use only the more specific selector.

 jQuery('div > div').bind('click', function() { jQuery(this).css('background','blue'); }) 

Answer 5

The best way to solve this problem is to provide your inner div identifiable function, such as a class, for example, <div class="inner"></div> .

Alternatively, change the selector:

 $('div > div').click(function() { $(this).css('background', 'blue'); } 

Answer 6

try giving the inner div an id tag and link to it ...

 <div><div id=foo>text goes here</div></div> ... $('#foo').bind('click', function() { $(this).css('background','blue'); }); 

NTN - Joe