javascript - Div 上的 jQuery Click 事件，子 Div 除外

Question

我有以下 HTML：

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

我正在尝试这样做，因此当用户单击serverdiv 时，它会弹出一个编辑对话框。问题只是在做：

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

不起作用，因为如果他们单击删除的 X，它会弹出编辑对话框。怎样才能让整个divserver除了div之外都有点击事件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();
});

只需确保发出的点击事件.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-parent

删除服务器——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
});