jQuery Çocuk Div ​​

Question

dışında, Div On Etkinlik'i tıklayın Aşağıdaki HTML vardır: Kullanıcıların bir düzenleme iletişim kutusunu getirir server div tıkladığınızda öyle yapmaya çalışıyorum

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

. Sorun basitçe yapıyor:

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

Çalışmaz, onlar silmek X tıklamanız durumunda, bu düzenleme iletişim kutusunu getirir çünkü. server tüm div toplamı, delete-server div dışında tıklama olayına sahip olabilir.

Answer 1

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

keman var: http://jsfiddle.net/9bzmz/3/

Answer 2

Sadece olayı tetikleyen unsur ne olduğunu kontrol:

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

LIVE DEMO İşte

Answer 3

bu çözmek için alternatif bir yol yoktur:

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

Yalnızca, .delete-server numaralı belgede yayınlanan tıklama olayının ana öğeye yetişmediğinden emin olun.

Answer 4

Sadece bu benim için çalışır.

js_object

davanızı Fore bir $('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 
}); 

gibi meta ebeveyn için jQuery nesnesidir:

sunucusu - js ebeveynli

silme-sunucu - js-çocuk-1

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

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