How To Unbind/off Jquery Event When Window Resize

I am trying to delete a jquery event when the window gets >490. However, the unblind() or off() elements do not deactivate the action activated when the window gets smaller than

Solution 1:

Here is how you can achieve your desired, the below code will unbind the hide event based on the screen size.

$(document).ready(function()
{
var eventPresent = false;
$(window).resize(function()
{
 console.log("current width : ", $(window).width());
 
if ($(window).width()<490 && eventPresent == false) 
{ 
 $("#shown").unbind().click(function(event)
 {
   event.preventDefault();   
   $("#divText").toggle('hide');
 });
 eventPresent  = true;
}    
elseif ($(window).width()>=490 && eventPresent == true) 
{            
   $("#shown").unbind();
   $("#divText").show()  
   eventPresent = false;     
 }
  });
});

 

<scriptsrc="https://code.jquery.com/jquery-2.2.4.min.js"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="crossorigin="anonymous"></script><aid="shown">click me to hide text</a><divid="divText">
                
You can not toggle me if screen is more than 490 px wide
         
</div>

P.S Run the snippet in full page mode.