jQuery evento On Click Div, Excepto Div Niño

Question

tengo el código HTML siguiente:

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

que estoy tratando de hacerlo de modo que cuando los usuarios hacen clic en el div server que nos lleva a un diálogo de edición. El problema es simplemente hacer:

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

no funciona, porque si hacen clic en la X que es borrar, se abre el diálogo de edición. ¿Cómo se puede hacer que todo el div server tenga el evento click salvo el delete-server div.

Answer 1

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

Aquí está el violín: http://jsfiddle.net/9bzmz/3/

Answer 2

Sólo tienes que comprobar cuál es el elemento que desencadenó el evento:

$(".server").click(function(e) { 
    if (!$(e.target).hasClass('delete-server')) { 
     alert('Show dialog!'); 
    } 
});​ 

LIVE DEMO

Answer 3

Hay una forma alternativa de resolver esto:

$(".server").click(function() { 
    // show edit dialog 
}); 
$(".delete-server").click(function (event) { 
    // show delete dialog for $(this).closest(".server") 
    event.stopPropagation(); 
}); 

Solo asegúrese de que un evento de clic emitido en .delete-server no burbujea en el elemento principal.

Answer 4

Esto solo funciona para mí.

js_object es jQuery objeto para padres meta como un $('body')

jq_object.on('click', '.js-parent :not(.js-child-1, .js-child-2)', function(event) { 
    //your code 
}); 

jq_object.on('click', '.js-child-1', function(event) { 
    //your code 
}); 

jq_object.on('click', '.js-child-2', function(event) { 
    //your code 
}); 

Fore su caso:

servidor - JS-matriz

delete-servidor - JS-niño-1

jq_object.on('click', '.server :not(.delete-server)', function(event) { 
    //your code 
}); 

jq_object.on('click', '.delete-server', function(event) { 
    //your code 
});