Disable a Function jQuery

Question

On Resize, I either call desktop Or mobile. I have a click function in each and they both seem to be running, if it was in desktop and then changes to mobile. I need to turn off desktop function if the mobile function is true and vice versa.

Here is a basic version of my code.

Screen_size()
$(window).resize(function() {
 Screen_size()
});
function Screen_size(){
 var w = $(window).width();
 if (w <= 710){
 Mobile();
 }
 if (w > 710){
 Desktop();
 }
}
function Mobile(){
 console.log('Mobile');
 $( "#open" ).click(function(e) {
 console.log('Open Mobile');
 });
}
function Desktop(){
 console.log('Desktop');
 $( "#open" ).click(function(e) {
 console.log('Open Desktop');
 });
}

• adeneo: Well, the resize event happens thousands of times when you resize the browser, maybe even millions of times, and every single time you add another click event handler, and it adds up.
• Nathaniel Meyer: Thanks that's good to know whats the best option to remove it?
• adeneo: Checking the window size isn't really very accurate, I could have a small browser window open on my 27" screen, and you'd think I was on my phone. Anyway, it's really an X/Y problem, what you should be doing is just checking the window size when you click -> jsfiddle.net/adeneo/gpyeyqgb
• adeneo: Either you're on a mobile phone, or you're on a desktop, it doesn't suddenly change.
• nnnnnn: You can say $("#open").off("click").click(...) to remove the previous click handler and then bind a new one, but in my opinion it would be better to just bind a single click handler once and move the if test inside the click handler (and not have a resize handler).

Answer 1

No need for window resize .. just make a click event like this

$( "#open" ).on('click', Screen_size);
 
function Screen_size(){
 var w = $(window).width();
 (w <= 710) ? Mobile() : Desktop() ;
}
function Mobile(){
 console.log('Open Mobile');
}
function Desktop(){
 console.log('Open Desktop');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open">Click</button>