当图标在按钮上时，Jquery'click'不会触发

Question

我使用Bootstrap和jQuery。我有三个按钮，每个按钮都有一个图标。当我将一个click - 事件绑定到一个按钮时，它会在我单击按钮（在边缘上）时起作用，但是当我点击它的中间时，它不会在图标上...

我的代码如下所示：

<div class="btn-group">
   <button class="btn btn_change_status" id="134" rel="tooltip" data-original-title="Tooltip">
      <i class="icon-eye-open"></i>
   </button>
   ... 
</div>

...

$('button.btn_change_status').on('click', function(e) {
   alert(e.target.id);
   return false;
});

如何将我btn_change_status包裹的所有元素绑定到点击事件？

Answer 1

使用以下内容更新您的CSS。我假设您的图标上不需要鼠标事件。

.icon-eye-open {

    pointer-events:none;
}

MDN Information regarding pointer-events

Answer 2

根据the documentation：

，您需要不同的语法

$('body').on('click', 'button.btn_change_status', function(e) {
   alert(e.target.id);
   return false;
});

Answer 3

对.on()

使用以下语法

$(document).on('click','btn_change_status', function(e) {
   //write your code here
});