Don't fire mouseenter event on parent

Question

For tags ( td , p , li ) that contain text, I added a data-id attribute. When hovering over a tag that has a data-id attribute, the button needs to be displayed. Everything works fine, except when the tags are nested, for example:

<li aria-level="1" data-id="66389178">
  <p data-id="11168609">text</p>
</li>

This example displays two buttons, one for the parent and one for the child. I added e.stopImmediatePropagation(); but that doesn't work for td . Here is the code itself:

$('[data-id]').mouseenter(function (e) {
  GodObj.btnadd = $('<button class="btn btn-outline-dark btn-note-tag">' +
    '<i class=\'fa fa-commenting\' aria-hidden=\'true\'></i>' + '</button>');

  $(this).append(GodObj.btnadd);
  e.stopImmediatePropagation();
}).mouseleave(function () {
  $(GodObj.btnadd).remove();
});

Example when two buttons are drawn:

<td aria-level="1" data-id="66389170">
  <p data-id="11168601">...</p>
</td>

Content is added by users through the editor on the site, so there is no strict rule for the level of nesting of tags into each other.

How to make the button render only once or for parent or child elements?

Answer 1

You need to start with e.stopImmediatePropagation(); :

            $('[data-id]').mouseenter(function (e) {
                e.stopImmediatePropagation();
                GodObj.btnadd = $('<button class="btn btn-outline-dark btn-note-tag">' +
                    '<i class=\'fa fa-commenting\' aria-hidden=\'true\'></i>' +
                    '</button>');
                $(this).append(GodObj.btnadd);
            }).mouseleave(function () {
                $(GodObj.btnadd).remove();
            });