title: jQuery - Dynamically added element not working on mouseleave, click events
body: <p>I have below div with class 'saved-wishlist',</p>
  <pre><code>&lt;div class=&quot;saved-wishlist&quot;&gt;
      &lt;i class=&quot;fas fa-wishlist&quot;&gt;&lt;/i&gt;
      &lt;a href=&quot;#&quot; id=&quot;A123&quot; class=&quot;remove-from-wishlist&quot;&gt;
          Saved to Wish List&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>On hover of anchor with class 'remove-from-wishlist', I'm updating the html of 'saved-wishlist' div ,</p>
  <p>jQuery</p>
  <pre><code>    $(document).on('mouseenter', '.remove-from-wishlist', function() {
          var $this = $(this);
          $this.closest('.saved-wishlist').html($(&quot;#tooltip_remove_content&quot;).html()); //Gets html from other div and updates html of 'saved-wishlist' div
      });
      $(document).on('mouseleave', '.remove-from-wishlist', function() {
          var $this = $(this);
          //some jQuery code
      });
  </code></pre>
  <p>Now, div with class 'saved-wishlist' looks like,</p>
  <pre><code>&lt;div class=&quot;saved-wishlist&quot;&gt;
          &lt;i class=&quot;fas fa-minus-circle&quot;&gt;&lt;/i&gt;
          &lt;a href=&quot;#&quot; id=&quot;A123&quot; class=&quot;remove-from-wishlist&quot;&gt;
              Remove from Wish List&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Two issues I'm facing,</p>
  <ol>
  <li><p>On the newly added anchor tag, when I mouse cursor away from it, the mouseleave function is not getting called, instead mouseenter gets fired .</p>
  </li>
  <li><p>On click of the newly added anchor tag, nothing happens , I have the below code,</p>
  <pre><code> $(document).on('click','.remove-from-wishlist',function(){
       //some jQuery code 
   });
  </code></pre>
  </li>
  </ol>
  <p>What mistake am I making here?</p>