How To Cancel / Delete a Function (when changing screen size) - Jquery

Question

How do you cancel / delete a function, dependant on the screen size? Currently, my functions carry over from portrait to landscape (and vice versa) .
So is it possible to delete/cancel a function? And if not what else should I do?

Jsfiddle for demo & more explanation: https://jsfiddle.net/tmcoqLgu/67/

Updated Jsfiddle with answer from Vexcess: https://jsfiddle.net/9kt0f3cs/8/

Jquery Code:

  var width = [0, 575];
  var height = [0, 575];

  function ScreenTrigger() {
    if (window.innerWidth >= width[0] && window.innerWidth < width[1]) {
      $('.display').addClass("portrait");
      $('.display').removeClass("landscape");
      if ($('.display').hasClass("portrait")) {

        // This function will carry over to both screen sizes once you resize the screen.
        $("#btn").click(function() {
          alert("This is an alert message!");
        });

      };
    } else if (window.innerHeight >= height[0] && window.innerHeight < height[1]) {
      $('.display').addClass("landscape");
      $('.display').removeClass("portrait");
      if ($('.display').hasClass("landscape")) {
        //
        /* 

            Delete Alert Function Here

        */
        //
      };
    } else {
      $('.display').removeClass("landscape");
      $('.display').removeClass("portrait");
    }
  };
  window.onresize = ScreenTrigger;
  ScreenTrigger();

Adding double functions in both screen sizes (the same function, but with different content to counter act eachother), doesn't work for me because the DIV that I'm targetting is used different in both screens sizes.

Using if ($('.display').hasClass("portrait")) to wrap around the functions, to cancel 1 or the other, doesn't work either.

Answer 1

You are using jQuery's click function. This method triggers a click event on the element and once the click event finishes it runs the callback function that you supply it. I believe that you might be trying to add an event listener to the element instead which can be achieved using the on method.

Replace

$("#btn").click(function() {
    alert("This is an alert message!");
});

with

$("#btn").on("click", function() {
    alert("This is an alert message!");
});

Now the callback will be run when the user clicks the button.

Secondly by "delete a function" I am assuming that you are wanting to remove the event listener. You can do this using jQuery's off method.

function triggerAlert() {
    alert("This is an alert message!");
}

// the button now alerts when the user clicks it
$("#btn").on("click", triggerAlert);

// the button no longer alerts when the user clicks it
$("#btn").off("click", triggerAlert);

One important thing to note is that you must pass in the exact function you want to remove to the off method which means you must store the function exteriorly rather than inlining it in the .on method call.