取消綁定和綁定特定屏幕寬度上的點擊事件

Question

即時在特定的屏幕寬度上嘗試綁定和解除綁定。當頁面以小於768px的屏幕寬度開始時，click事件就像它應該那樣工作。當我將它調整到更大的屏幕時，點擊事件就像它應該解除綁定一樣，但是當我將屏幕重新調整到小於768px的時候，我的點擊事件不能像我想要的那樣工作。有什麼建議？

$(document).ready(function() {  
     $(".custom-filter").click(function(){ 
      $(".fa").toggle(); 
      $("#test").slideToggle("slow"); 
     }); 

     // I want to bind and unbind this click event 
     $("div.filter-group-shop-by-collecti h4").bind("click", (function() { 
      $("ul.nav-shop-by-collecti").slideToggle("slow"); 
     }));  

     $(window).on('resize', function(){ 
      var win = $(this); 
      if (win.width() >= 768) { 
       $("div.filter-group-shop-by-collecti h4").unbind("click"); 
      } else { 
       $("div.filter-group-shop-by-collecti h4").bind("click"); 
      }  
     }); 
}); 

Answer 1

我想通了！

$(document).ready(function() {  
    $(".custom-filter").click(function(){ 
     $(".fa").toggle(); 
     $("#test").slideToggle("slow"); 
    }); 

    function toggleSlideShow(){ 
    $("ul.nav-shop-by-collecti").slideToggle("slow"); 
    } 


    $(window).load(function() { 
     if($(window).width() >= 768) { 
      $("div.filter-group-shop-by-collecti h4").unbind(); 
     } 
    }); 

    // I want to bind and unbind this click event 
    $("div.filter-group-shop-by-collecti h4").bind("click", toggleSlideShow);  

    $(window).on('resize', function(){ 
     var win = $(this); 
     if (win.width() >= 768) { 
      $("div.filter-group-shop-by-collecti h4").unbind(); 
     } else { 
      $("div.filter-group-shop-by-collecti h4").unbind(); 
      $("div.filter-group-shop-by-collecti h4").bind("click", toggleSlideShow); 
     }  
    });  
});