jQuery Trouble triggering click event on popup

Question

I have a fairly simple page with a couple divs designed to be pop ups...

I'm having an issue with the .close div located in a jQuery populated popup. A btn is clicked .. jquery brings up a div and then populates it with content from another div.

This all works as expected.

There's a .close div in the popups designed to be, well a close button.

$('body, .close').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

This works perfectly when the .close div is hard coded into the popup itself.. but it will not function in the when content is populated from somewhere else.

Can anyone shed some light on what I'm missing please?

---

// included so snippet functions....
var cards = $(".smpl");
cards.each(function(i) {
  var im = $(this).attr('data-im');
  var fadeTime = 180;
  $(this).css('background-image', 'url(_core/img/p/' + im + ')')
  $(this).delay(fadeTime * i).fadeIn(fadeTime);
});

// loaded #info with content from other divs
$('.about, .cont').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  var wht = $(this).attr('data-t');
  $('#info').removeClass('pop').html(''); //empty's info popup if its present
  $('#pup').hide(); //hides other popup if its present
  $('#cov').fadeIn(300);
  $('#info').addClass('pop').html($(wht).html()).fadeIn(300);
  console.log(wht);
});

// Should close all popups - FAIL for the #info .close div
// ###### this is where something is not right or borken...
$('body, .close').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  $('#info').html('').removeClass('pop').fadeOut(300);
  $('#pup').children('h1').html('');
  $('#pup').fadeOut(300);
  $('#cov').fadeOut(300);
  console.log('clk');
});

$('#info').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});
$('#pup').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});

//This opens #pup div
$('.sp, .ai, .ot').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  var imgsrc = $(this).attr('data-im');
  var longDes = $(this).children('.dspt').attr('data-ld');
  $('#cov').fadeIn(300);
  $('#pup').addClass('pop');
  $('#pup h1').html(longDes);
  $('#pup').css('background-image', 'url(_core/img/p/' + imgsrc + ')').fadeIn(300);
});

.nav {
  position: absolute;
  right: 30px;
  top: 20px;
  list-style: none;
  z-index: 9997;
}

.nav a:link,
.nav a:visited {
  display: block;
  transition: all 0.5s;
  font-size: 13px;
  line-height: 22px;
  width: 76px;
  text-transform: uppercase;
  background: #07e;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  height: 25px;
  position: relative;
  right: 20px;
  cursor: pointer;
  margin: 5px 0;
  text-align: center;
  box-shadow: 0 -2px 0 #fff;
}

.smpl {
  overflow: hidden;
  position: relative;
  float: left;
  border: 1px solid #aaa;
  padding: 0;
  display: none;
  width: 100%;
  max-width: calc((100% - 60px) / 10);
  height: auto;
  margin: 5px 5px 0 0;
  background-size: cover;
  background: #aaa;
}

h1.dspt {
  position: absolute;
  bottom: -50px;
  width: 100%;
  background: #2d2d2d;
  color: #fff;
  text-transform: none;
  padding: 5px;
  opacity: 0;
  transition: all .5s;
}

.smpl:hover h1.dspt {
  bottom: 0;
  transition: all .5s;
  background: #07e;
  opacity: 0.8;
}

#over,
#cov {
  width: 100%;
  height: 100%;
  background: #aaa;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9991;
  opacity: 0.8;
}

#cov {
  background: #fffs;
  opacity: 0.9;
}

#pup,
#info {
  width: 150px;
  height: 150px;
  background-color: #fff;
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate(0, -50%);
  z-index: 9998;
  opacity: 1;
  margin: 0 auto;
  border: 1px solid #aaa;
  box-shadow: 0 5px 50px #666;
  overflow: hidden;
  display: none;
}

#pup h1.dspt {
  position: absolute;
  bottom: -50px;
  width: 100%;
  background: #2d2d2d;
  color: #fff;
  text-transform: none;
  font-size: 16px;
  padding: 15px 40px;
  opacity: 0;
  transition: all .5s;
  text-align: left;
  text-shadow: 2px 0 1px #000;
}

#pup:hover h1.dspt {
  bottom: 0;
  transition: all .5s;
  background: #2d2d2d;
  opacity: 0.8;
}

#info {
  padding: 10px;
  overflow-Y: auto;
  border: 3px solid #333;
  border-radius: 6px;
}

.pop .close {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #333;
  color: #fff;
  opacity: .5;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  transition: all .5s;
  cursor: pointer;
}

.pop:hover .close {
  top: 10px;
  right: 10px;
  transition: all .5s;
  background: #2d2d2d;
  opacity: 0.8;
  z-index: 9999;
}

#about,
#cont {
  display: none;
  background: #fff;
  padding: 10px;
  position: relative;
  text-align: left;
  margin: 10px 0 0 0;
  border: 1px solid #ddd;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="cov"></div>
<div id="info"></div>
<div id="pup">
  <h1 class="dspt"></h1>
  <div class="close">X</div>
</div>
<div class="grid-container">
  <div class="grid-x grid-padding-x">
    <div class="large-12 medium-12 cell masthead">
      <div class="base">
        <ul class="nav">
          <li><a href="#" class="nbtn about" data-t="#about">about</a></li>
          <li><a href="#" class="nbtn cont" data-t="#cont">contact</a></li>
        </ul>
      </div>
    </div>
    <div class="large-12 medium-12 cell" id="content">
      <div id="about">
        <div class="close">X</div>
        <h4>about - Info Div</h4>
        <p>Hover to see close btn, but it fails to function.
          <p>
      </div>
      <div id="cont">
        <div class="close">X</div>
        <p>Contact - Info div</p>
        <p>Hover to see close btn, but it fails to function.
          <p>
      </div>
      <div class="grid-x grid-padding-x">
        <div class="large-12 medium-12 cell inner">
          <div class="smpl sp" data-im="h1pc_15px.png">
            <div class="zm"></div>
            <h1 class="dspt" data-ld="#pup div">Pup Div</h1>
            <img alt="H" src="_core/img/p/_blank.png"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- // grid padding -->
</div>
<!-- //grid container -->

Snippet Above ..

• If you click the [broken] image
• the #pup popup shows
• clicking outside #pup(grey area) removes the popup (- GOOD)
• clicking the .close div removes the popup (- GOOD).

---

• Click "about" or "contact" in the header
• the #info popup shows
• clicking outside that popup (grey area) closes it (- GOOD)
• clicking the .close div simply won't trigger the close event (- FAIL).

---

Suggested that it was due to the click event on body and stopPropagation... So I tested...

$('.about, .cont').on('click', function (e) {
    e.preventDefault();
    //e.stopPropagation();
    var wht = $(this).attr('data-t');
    $('#info').removeClass('pop').html(''); //empty's info popup if its present
    $('#pup').hide(); //hides other popup if its present
    $('#cov').fadeIn(300);
    $('#info').addClass('pop').html($(wht).html()).fadeIn(300);
    console.log(wht);
    });

$('#cov, .close').on('click', function(e) {
    e.preventDefault();
    //e.stopPropagation();
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

Issue remains.

Answer 1

It works if you change the click function to: $(document).on('click', 'body', '.close', function()

You also need to remove this bit:

$('#info').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});
$('#pup').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});