I am having an issue very similar to: ["Jquery 'click' not firing when icon is on button"](https://stackoverflow.com/questions/17085257/jquery-click-not-firing-when-icon-is-on-button) however the resolution for that post is not providing a solution for me, so I think something different may be going on. 

The essential problem is that I have a button with an icon in it. When I click on the button (e.g. the text) the event target is the button element; however when I click on the icon, the event target is the icon object. This unfortunately is extremely annoying as I am storing data values on my button that I would like access to. 

Here is the HTML:

```
<button class="btn btn-success vote-button" id="btnUpVote" type="button" data-vote="1">
    <i class="fa fa-thumbs-up"></i>
    Up Vote!
</button>

<button class="btn btn-danger vote-button" id="btnDownVote" type="button" data-vote="-1">
    <i class="fa fa-thumbs-down"></i>
    Down Vote!
</button>

```

And here is the Javascript:

```
function sendVote(event) {
    var $btn = $(event.target);
    console.log(parseInt($btn.data('vote'));
    console.log($btn.prop('tagName'));
}

$('body').on('click', 'button.vote-button', sendVote);

```

Clicking on the text ("Up Vote!" or "Down Vote!") results in the following console output:

```
1
BUTTON
-1 
BUTTON

```

Clicking on the icon (, etc.) results in the following console output:

```
NaN
I
NaN
I

```

Even though I've registered the handle on elements with selector "button.vote-button". Does anyone know why this is happening? I'd hate to have to give data attributes to the icons.