1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Triggering a link if wrapped in an <em> tag

Discussion in 'jQuery' started by 7643sfsag6, Oct 6, 2019.

  1. #1
    I am having an issue where a modal isn't triggering if it is wrapped in an <em> 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');
        }
      });
    });
    Code (JavaScript):
    FIDDLE
    https://jsfiddle.net/postcolonialboy/h70bkej9/30/
     
    7643sfsag6, Oct 6, 2019 IP
  2. 7643sfsag6

    7643sfsag6 Member

    Messages:
    58
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    by changing `e.target` to `e.currentTarget` , it worked.

    JavaScript:
    
      $('.modal-button').click(e => {
        e.preventDefault();
        $(e.currentTarget).closest('.modal').add('body').addClass('open');
        openModals.push($($(e.currentTarget).attr('href')).show());
      });
    Code (markup):
     
    7643sfsag6, Oct 6, 2019 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I'm just wondering why you're wasting JavaScript on something that's not even JS' job anymore. either:

    <a href="#myModal">Open Modal</a>

    and use #myModal:target in the CSS to trigger its view, with <a href="#">X</a> to close it, or:

    <label for="toggle_myModal">Open Modal</label>

    and use

    <input type="checkbox" id="toggle_myModal" class="toggle" hidden>
    <div id="myModal">

    So that:

    .toggle:checked + div {

    can be used to display it, with another <label for="toggle_myModal">X</label> to close it.

    NOT even JavaScript's job anymore, much less the train wreck of developer ignorance, incompetence, and ineptitude that is jQuery. The ONLY thing you can learn from jQuery is how NOT to write JavaScript.
     
    deathshadow, Oct 6, 2019 IP