Madelyn_New_Hampshire
New Member
I have a set of boxes on a page that are presented as a list, and within these boxes there might be some links that can be clicked. I want the links within the boxes to work as normal (i.e. bubble up and either perform the default action or then be handled by event handlers further up the DOM), but if the box is clicked anywhere else then it should be caught by a particular event handler attached to the "list" containing all the boxes.Simple html representation\[code\]<div class="boxlist"> <div class="box" data-boxid="1"> Some text, and possibly a <a href="http://stackoverflow.com/questions/15676441/#">link</a> and another <a href="http://stackoverflow.com/questions/15676441/#">link</a>, and perhaps even a third <a href="http://stackoverflow.com/questions/15676441/#">link</a>. </div> <div class="box" data-boxid="2"> Some more text, this time without a link. </div></div>\[/code\]The javascript that I thought should work.\[code\]$(function () { $('.boxlist').on('click', '.box :not(a)', function (e) { var boxid= $(this).closest('.box').data('boxid'); console.log('open: ' + boxid); });});\[/code\]My expectation was that the above javascript should handle all clicks that did not originate from tags. However, for some reason when the box is clicked (either the box itself, or an tag, doesn't matter), it fires this event X times, where X is the total number of tags within the list of boxes.EDIT: Made a jsbin: http://jsbin.com/itunoz/2/editSo I have two questions:1. What am I doing wrong with the :not() selector.2. Is there a better way to handle this scenario?