jQuery Click Div On Div，除了Child Div

我有以下HTML：

 Server Name 
X
  

我试图这样做，当用户点击server div它会打开一个编辑对话框。 问题只是做：

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

不起作用，因为如果他们点击删除的X，它会打开编辑对话框。 如何使整个div server具有除delete-server div之外的click事件。

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上发出的click事件不会冒泡到父元素。

Answer 4

只有这对我有用。

js_object是meta parent的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

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