jQuery Click Event On Div, Except Child Div

Question

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 1

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

Sign up