Triggering a link if wrapped in an <em> tag

[j7f4f2a4fds2]

I am having an issue where a modal isn’t triggering if it is wrapped in an tag.
In my example, if you click in the “normal” font-style part of the link, it fires properly, if you click where the italics are, it won’t.

Any ideas?

JS

$(function () {
  const openModals = [];
  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.target).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.target).attr('href')).show());
  });
  $(window).add('.close').click(e => {
    e.stopPropagation();
    if ($(e.target).is('.modal, .close')) {
      const closing = openModals.pop().addClass('modal-content-active');
      setTimeout(() => {closing.hide().removeClass('modal-content-active')}, 0);
      if (openModals.length > 0) {
        openModals[openModals.length - 1].removeClass('open');
      } else $('body').removeClass('open');
    }
  });
});

FIDDLE

[j7f4f2a4fds2]

by changing e.target to e.currentTarget , it worked.

  $('.modal-button').click(e => {
    e.preventDefault();
    $(e.currentTarget).closest('.modal').add('body').addClass('open');
    openModals.push($($(e.currentTarget).attr('href')).show());
  });

[bwclovis]

Only issue with that is keyboard navigation/functionality won’t work.