title: JQuery toggleClass not working with dynamic data
body: <p>From my code, When i click on share icon it popover and shows some social media sharing icons. Toggle is working only when click on share icon and then clicks cross(X) icon. If i click share icon and click elsewhere on page and then click on cross(X) icon toggle is not working. Can anyone please suggest how to fix this.</p>
  
  <p><a href="https://jsfiddle.net/n9eaojg5/22/" rel="nofollow noreferrer">https://jsfiddle.net/n9eaojg5/22/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var courseslist = "";
  for(var i=0; i&lt;3;i++){
  
  courseslist += "&lt;div class='card__share'&gt;";
  courseslist += "&lt;div class='card__social'&gt;";
  courseslist += "&lt;a class='share-icon facebook' href='#'&gt;&lt;span class='fa fa-facebook'&gt;&lt;/span&gt;&lt;/a&gt;";
  courseslist += "&lt;a class='share-icon twitter' href='#'&gt;&lt;span class='fa fa-twitter'&gt;&lt;/span&gt;&lt;/a&gt;";
  courseslist += "&lt;a class='share-icon googleplus' href='#'&gt;&lt;span class='fa fa-google-plus'&gt;&lt;/span&gt;&lt;/a&gt;";
  courseslist += "&lt;/div&gt;";
  courseslist += "&lt;a id='share' class='share-toggle share-icon' href='#'&gt;&lt;/a&gt;";
  courseslist += "&lt;/div&gt;";
  courseslist += "&lt;/br&gt;";
  courseslist += "&lt;/br&gt;";
  }
  $("#courseslist").html(courseslist);
  
    $(document).ready(function () {
          $('.card__share &gt; a').on('click', function (e) {
              e.preventDefault() // prevent default action - hash doesn't appear in url
              $(this).parent().find('div').toggleClass('card__social--active');
              $(this).toggleClass('share-expanded');
          });
         
  
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card__share {
  float:right;
  position: relative;
  }
                  
  .card__social {
  position: absolute;
  top: 0;
  right: -48px;
  visibility: hidden;
  width: 160px;
  transform: translateZ(0);
  transform: translateX(0px);
  transition: transform 0.35s ease;
  }
                  
  .card__social--active {
  visibility: visible;
  transform: translateZ(0);
  transform: translateX(-48px);
  transition: transform 0.35s ease;
  }
                  
  .share-toggle {
  z-index: 2;
  }
                  
  .share-toggle:before {
  content: "\f1e0";
  font-family: 'FontAwesome';
  color: #fff;
  }
                  
  .share-toggle.share-expanded:before {
  content: "\f00d";
  }
                  
  .share-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: grey;
  transition: all 0.3s ease;
  outline: 0;
  font-family: FontAwesome;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
  }
                  
  .share-icon:hover,
  .share-icon:focus {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.24);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  }
                  
  .facebook {
  background-color: #3b5998;
  }
                  
  .twitter {
  background-color: #00abe3;
  }
                  
  .googleplus {
  background-color: #d3492c;
  }
                  
  span.facebook,
  span.twitter,
  span.googleplus {
  color: #fff;
  font-family: FontAwesome;
  }
                  
  .facebook:hover,
  .twitter:hover,
  .googleplus:hover {
  color: #eee;
  }
                  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="courseslist"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>