Question

我的javascript：

$(".openPage").click(function() {
        alert(1);
    });

$(".openButton").click(function() {
        alert(2);
    });

我的HTML：

<tr class='openPage'>
 <td></td>
 <td><button class='openButton'></button></td>
</tr>

当我点击td内的我的按钮时，第一个函数被触发，而不是带有alert（2）的函数。我该如何解决这个问题？

Answer 1

嗯，元素包含在第一个元素中。

但是你可以，如果你真的需要这样做：

$('.openPage').click(function(e, event) { 
       if ( $(e).hasClass('openButton) ) { 
            $(e).trigger('click');
       }
});

或更好

 var page = $('.openPage'); 
 page.click(function(e, event) { 
       if ( $(e) != page ) { 
            $(e).trigger('click');
       }
});

您也可以尝试：

event.stopPropagation();

Answer 2

您需要的只是event.stopPropagation()项上的button。这就是全部

$(".openPage").click(function() {
  alert(1);
});

$(".openButton").click(function(evt) {
  evt.stopPropagation();   // The click won't propagate to .openPage parent
  alert(2);
});

使用.click在tr和td上使用不同类别2次

2 个答案: