Click event on nested elements with same class
Hello everyone,
I am making a system whereby if an element has a class "editable", you can click it and a popup box appears with some options about that particular element. Fairly straightforward, I'm using:
<div class="editable">
CONTENT HERE
</div>
$('.editable').click(function() {
// get the contents and do something with them in popup box
});
This works fine but I need to be able to have lots of different divs, all with class "editable", some of which are inside others with class "editable". Like this:
<div class="editable" id="something">
CONTENT HERE
<div class="editable" id="somethingelse">OTHER CONTENT HERE</div>
</div>
However, clicking on the 'somethingelse' div, triggers the click correctly but also triggers it for the parent 'something' div, so I end up with the popup box appearing twice.
Does anyone know how to just catch a click event on the exact div (without using ids) without triggering the parent?
Many thanks!