Jquery 'click' not firing when icon is on

Question

I use Bootstrap and jQuery. I have three buttons, each with an icon in it. When I bind an click-event to a button, it works when I click on the button (on the edge), but not when I click on the middle of it, on the icon...

My code looks like this:

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

How could I bind all elements wrapped by my btn_change_status to the click-event?

Answer 1

You need a different syntax, as per the documentation:

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

Answer 2

Update your css with the following. I'm assuming you don't need mouse events on your icon.

.icon-eye-open {

    pointer-events:none;
}

MDN Information regarding pointer-events

Answer 3

Use the following syntax for .on()

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