我有以下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都有点击事件。
发布于 2012-04-15 15:18:34
$(".server").on('click', ':not(.delete-server)', function (e) {
e.stopPropagation()
// Show edit dialog
});
这就是问题所在:http://jsfiddle.net/9bzmz/3/
发布于 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
上发出的单击事件不会冒泡到父元素即可。
发布于 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
});
https://stackoverflow.com/questions/10160219
复制相似问题