首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >分区上的jQuery单击事件,子分区除外

分区上的jQuery单击事件,子分区除外
EN

Stack Overflow用户
提问于 2012-04-15 15:12:38
回答 3查看 26.9K关注 0票数 28

我有以下HTML:

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

我正在尝试这样做,当用户单击server目录时,它会弹出一个编辑对话框。问题很简单:

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

不起作用,因为如果他们点击是delete的X,就会弹出编辑对话框。怎样才能使除delete-server server之外的整个div div都有点击事件。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-04-15 15:18:34

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

这就是问题所在:http://jsfiddle.net/9bzmz/3/

票数 32
EN

Stack Overflow用户

发布于 2012-04-15 16:30:26

有一种替代方法可以解决这个问题:

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

只要确保在.delete-server上发出的单击事件不会冒泡到父元素即可。

票数 11
EN

Stack Overflow用户

发布于 2016-11-15 20:20:05

只有这个对我有效。

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
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10160219

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档