JQuery Нажмите Событие на Div, кроме Child Div

У меня есть следующий HTML:

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

Я пытаюсь сделать это, когда пользователи нажимают на div server, он вызывает диалог редактирования. Проблема заключается просто:

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

Не работает, потому что, если они нажмут X, который является удаленным, он вызывает диалог редактирования. Как сделать, чтобы весь div server имел событие click, кроме div delete-server.

Ответы

Ответ 1

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

Здесь скрипка: http://jsfiddle.net/9bzmz/3/

Ответ 2

Просто проверьте, что является элементом, вызвавшим событие:

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

LIVE DEMO

Ответ 3

Существует альтернативный способ решения этой проблемы:

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

Просто убедитесь, что событие click, выпущенное на .delete-server, не попадает в родительский элемент.

Ответ 4

Только это работает для меня.

js_object - объект jQuery для мета-родительского типа, такой как $('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
});

Для вашего дела:

server - js-parent

delete-server - js-child-1

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

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