的Javascript事件仍射擊，即使類名不存在

Question

有人能向我解釋時，它的定位一個類名不存在的事件將如何激發..

CODE

(function ($) { 

    var config = {}; 

    $(document).ready(function() { 

     var wi = $(window).width(); 

     if (wi > 768) { 
      $('body').addClass('dosomething'); 
     } else { 
      $('body').removeClass('dosomething'); 
     } 

     $(window).resize(function() { 

      var wi = $(window).width(); 

      console.log(wi); 

      if (wi > 768) { 
       $('body').addClass('dosomething'); 
      } else { 
       $('body').removeClass('dosomething'); 
      } 

      var $container = $('.email-signup__wrap'), 
      $cHeight = $('.email-signup').outerHeight(); 

      // $('.dosomething .email-signup__wrap').on('mouseenter mouseleave', function(ev) { 
      $('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) { 

       var $this = $(this); 

       if (ev.type === 'mouseenter') { 

        TweenMax.to($container, .4, { 
         ease: Power2.easeOut, 
         css:{ 
          overflow: 'visible', 
          position: 'absolute', 
          top: -$cHeight 
         } 
        }); 
       } 
       else 
       { 
        TweenMax.to($container, .4, { 
         ease: Power2.easeOut, 
         css:{ 
          position: 'relative', 
          top: 0 
         }, 
         onComplete: hide 
        }); 

        function hide(){ 
         $container.css('overflow', 'hidden'); 
        } 

        $("div.mce_inline_error").remove(); 
       } 
      }); 
     }); 
    }); 

})(jQuery); 

我已經走了一段路，將dosomething類添加到每個選擇器，以防止在768px以下的屏幕尺寸上觸發事件。

基本上，用戶將鼠標懸停在頁腳欄上，並且聯繫表單會從畫布外彈出，但在較小的屏幕/移動設備上，它仍會保留在頁面內容的基礎上。

我知道這是最基本的代碼，但是，我一直在試圖讓這個工作好幾天，而且我正忙着搜索一些代碼以尋找解決方案。

我不是經過周折，媒體查詢等....我真的很想理解這一點，爲了我自己的理智。

FINAL工作液

(function ($) { 

     var config = {}; 

     $(document).ready(function() { 

      $(window).on("resize", function() { 
       resizeWindow(); 
      }).trigger("resize"); 

      var $container = $('.email-signup__wrap'), 
       $cHeight = $('.email-signup').outerHeight(); 

      $(document).on({ 
       mouseenter: function() { 
        TweenMax.to($container, .4, { 
         ease: Power2.easeOut, 
         css:{ 
          overflow: 'visible', 
          position: 'absolute', 
          top: -$cHeight 
         } 
        }); 
       }, 
       mouseleave: function() { 
        TweenMax.to($container, .4, { 
         ease: Power2.easeOut, 
         css:{ 
          position: 'relative', 
          top: 0 
         }, 
         onComplete: hide 
        }); 

        function hide(){ 
         $container.css('overflow', 'hidden'); 
        } 

        $("div.mce_inline_error").remove(); 
       } 
      }, ".dosomething .email-signup__wrap"); 
     }); 

     function resizeWindow() { 
      config.wWidth = $(window).width(); 

      if (config.wWidth > 768) { 
       $('body').addClass('dosomething'); 
      } else { 
       $('body').removeClass('dosomething'); 
      } 
     } 

    })(jQuery); 

Answer 1

使用event delegation jQuery中。你動態地添加類.dosomething

$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {