title: $.on("mouseenter") lags my website when I have a lot of Dynamically generated div tags
body: <p>I am doing a graduation website for my school. On each tab I will ajax call all the works to display, once the works got displayed, I got a function </p>
  
  <pre><code>    $(".viewport-computer .img_thumb_holder").on({
          mouseenter: function () {
              //stuff to do on mouse enter
              $(this).find(".caption").stop().fadeTo('slow', 1); 
          },
          mouseleave: function () {
              //stuff to do on mouse leave
              $(this).stop().fadeTo('slow', 1);  
              $(".caption").stop().fadeTo('slow', 0); 
              $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
              $(".viewport-computer .img_thumb").hide();
          }
      });
  </code></pre>
  
  <p>which allows me to hover on the works and display the <code>name</code> and <code>caption</code> of the works displayed.</p>
  
  <p>This works fine if the ajax call appended 20 or lesser works. But when I have more than 20 works, there will be a significant lag feeling when you hover over the works, where the transition to show the <code>name</code> and <code>caption</code> only show after like 3 seconds after hovering. I am quite stressed on how I can solve the lag issues as initially I was using</p>
  
  <pre><code>$(".viewport-computer .img_thumb_holder").hover(function(){
          //$(this).stop().fadeTo('slow', 0.4);  
          $(this).find(".caption").stop().fadeTo('slow', 1); 
      },function(){  
          $(this).stop().fadeTo('slow', 1);  
          $(".caption").stop().fadeTo('slow', 0); 
          $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
          $(".viewport-computer .img_thumb").hide();
      });
  </code></pre>
  
  <p>but I changed it to .on(mouseenter) after online searching that i should use .on but it doesn't solve the issues. Any other advice will be appreciated</p>
  
  <p>Update - to show my codings on how I display it</p>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div class="row"&gt;
                  &lt;!-- For mobile viewport --&gt;
                  &lt;div class="viewport-mobile img_thumb_holder_div col-xs-12 hidden-lg"&gt;
                  &lt;/div&gt;
  
                  &lt;!-- For computer viewport --&gt;
                  &lt;div class="viewport-computer img_thumb_holder_div col-lg-12 visible-lg no-padding "&gt;
  
                  &lt;/div&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>JS - once this tab is clicked, it will display all works</p>
  
  <pre><code>            $(".tab_bm").click(function() {
                  $(".container .popUp .author_pic_holder img").css("border-color", "#006a96");  
                  $(".divider").css("background-image", "url(images/divider_it.png)"); 
                  $(".infinite_header img").attr("src", "images/header_it.png");
                  $(document.body).css("background-image", "url(images/BG/BlueBG.jpg)"); 
                  $(".footer img").attr("src", "images/Footer_v1_1.jpg");
                  //remove all div images first before adding images
                  resetHome(); // this remove all the previously added displayed works
                  $.ajax({
                      type: "POST",
                      dataType: "json",
                      url: "CMS/PHP/displayBmThumbs.php",
                      success: function(data) {
                          $(".viewport-computer .img_thumb_holder").remove();
                          $(".viewport-mobile .img_thumb_holder").remove();
                          $(".author_pic_holder").show();
                          $(".author_info_holder").show();
                          for(i=0; i&lt;data.length; i++){
                              $(".viewport-computer.img_thumb_holder_div").append("&lt;div class='col-lg-2 img_thumb_holder no-padding bioDisplay'&gt;&lt;div class='featured'&gt;&lt;/div&gt;&lt;img class='img_thumb'&gt;&lt;h2 class='caption'&gt;Author&lt;br /&gt;Description&lt;/h2&gt;&lt;/div&gt;");
                              $(".viewport-mobile.img_thumb_holder_div").append("&lt;div class='col-xs-6 img_thumb_holder top-buffer bioDisplay'&gt;&lt;img class='img_thumb'&gt;&lt;h2 class='caption_mobile'&gt;Author&lt;br /&gt;Description&lt;/h2&gt;&lt;/div&gt;");
                          }
                          idArray = [];
                          captionArray = [];
                          $('.viewport-computer .img_thumb_holder img').each(function(index, element) {
                              // Work out the data to set
  
                              // Now apply this to the elements
                              if (data[index]){
                                  var imageUrl = data[index].links;
                                  var captionHtml = "&lt;span&gt;" + toTitleCase(data[index].caption) + "&lt;span class='spacer'&gt;&lt;/span&gt;&lt;br/&gt;"
                                  $(element).attr("src", imageUrl);
                                  if(checkIfCom == true){
                                      $(element).parent().css('background-image', 'url("'+imageUrl+'")');
                                  }
                                  $(element).next().html(captionHtml);
                                  captionArray.push(toTitleCase(data[index].caption));
                                  idArray.push(data[index].id);
                                  homeLinksArray.push(data[index].links);
                                  //homeTitleArray.push(toTitleCase(data[index].title));
                              }                       
                              $('.viewport-mobile .img_thumb_holder img').each(function(index, element) {
                                  var imageUrl = homeLinksArray[index];
                                  var captionHtml = captionArray[index];
                                  $(element).attr("src", imageUrl); // i must find a way to solve this
                                  $(element).next().html(captionHtml);
  
                              });
                              console.log("id: " + idArray);
                              console.log("caption: " + captionArray);
                              console.log("homeLinksArray: " + homeLinksArray );
                              hideDefault()
                              captionHover();
                              clickToAuthorPage();
                          });
                       }
                  });
              }); 
  </code></pre>
  
  <p>and lastly</p>
  
  <p>my current mouseEnter/mouseLeave function</p>
  
  <pre><code>function captionHover() {       
      $(".viewport-computer .img_thumb_holder").on({
          mouseenter: function () {
              //stuff to do on mouse enter
              $(this).find(".caption").stop().fadeTo('slow', 1); 
          },
          mouseleave: function () {
              //stuff to do on mouse leave
              $(this).stop().fadeTo('slow', 1);  
              $(this).find(".caption").stop().fadeTo('slow', 0);
              //$(".caption").stop().fadeTo('slow', 0); 
              $(".viewport-computer .img_thumb_holder .img_thumb").stop().fadeTo(1, 1);  
              $(".viewport-computer .img_thumb").hide();
          }
      });
  };
  </code></pre>
  
  <p>The delay isn't so bad now but u can still notice a 0.5 delay, any more ways I can improved it to work more efficiently?</p>