$（e.target）是 而不是包含 <div> … </div>

Question

I have been working on a large script which checks the data-action and now I've implemented a hover to show some icons; like so:

<div class="Flag" data-action="mail-flag"><i class="fa fa-flag" aria-hidden="true"></i></div>

However with this not having plain text within and instead an icon, if ($(e.target).attr('data-action')) { does not work as $(e.target) is the <i></i> .

How can I get if ($(e.target).attr('data-action')) { to work on the <div>...</div> without adding the data-action="mail-flag" to the <i></i> ?

Answer 1

You can check the element, then its parent. First, check if

$(e.target).attr('data-action')

exists. If it does not, use

$(e.target).parents(".Flag").attr('data-action')

Answer 2

You can use event delegation to access the attribute value.

$('div[data-action]').on('mouseenter', 'i.fa', function(e){
    console.log($(e.delegateTarget).data('action'))
})