Justin Justin - 25 days ago 6
Javascript Question

jQuery Click Event On Div, Except Child Div

I have the following HTML:

<div class="server" id="32">
<a>Server Name</a>
<div class="delete-server">X</div>
</div>


I am trying to make it so when users click the
server
div it brings up an edit dialog. The problem is simply doing:

$(".server").click(function () {
//Show edit dialog
});


Does not work, because if they click the X which is delete, it brings up the edit dialog. How can make the entire div
server
have the click event except the
delete-server
div.

Answer
$(".server").on('click', ':not(.delete-server)', function (e) {
     e.stopPropagation()
     // Show edit dialog
});

Here's the fiddle: http://jsfiddle.net/9bzmz/3/