jQuery的Click事件在事业部，除了儿童事业部(jQuery Click Event On D

我有以下HTML：

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

我想使它所以当用户单击该server将弹出的编辑对话框股利。 问题是简单地做：

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

不行的，因为如果他们点击X是删除，它带来了编辑对话框。 怎样才能使整个DIV server具有除click事件delete-server股利。

Answer 1:

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

这里的小提琴： http://jsfiddle.net/9bzmz/3/

Answer 2:

只是检查什么是谁触发事件的元素：

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

现场演示

Answer 3:

还有就是要解决这个问题的另一种方式：

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

只要确保在发出一个click事件.delete-server不能上升到父元素。

Answer 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
});

富勒你的情况：

服务器 - JS-父

删除服务器 - JS-孩子-1

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

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

文章来源: jQuery Click Event On Div, Except Child Div