jQuery Nhấn tổ chức sự kiện On Div, Trừ Child Div

Question

Tôi có HTML sau:

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

tôi đang cố gắng để làm cho nó như vậy khi người dùng nhấp vào div server nó sẽ trả về một hộp thoại chỉnh sửa. Vấn đề chỉ đơn giản là làm:

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

Không hoạt động, bởi vì nếu họ nhấp vào X xóa, nó sẽ trả về hộp thoại chỉnh sửa. Cách làm cho toàn bộ div server có sự kiện nhấp ngoại trừ số delete-server div.

Answer 1

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

Đây là fiddle: http://jsfiddle.net/9bzmz/3/

Answer 2

Chỉ cần kiểm tra các yếu tố người gây ra sự kiện này là gì:

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

LIVE DEMO

Answer 3

Có một cách khác để giải quyết việc này:

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

Chỉ cần đảm bảo sự kiện nhấp chuột được phát hành trên .delete-server không phát sinh đến phần tử gốc.

Answer 4

Chỉ tính năng này phù hợp với tôi.

js_object là jQuery đối tượng cho cha mẹ meta như một $('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 trường hợp của bạn:

máy chủ - js-mẹ

xóa-server - js-con-1

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

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