Languages
[Edit]
EN

jQuery - how to remove event with unbind method?

6 points
Created by:
AnnLen
9180

Using jQuery it is possible to remove event with unbind method in following ways.

Note: unbind method has been marked as depricated in jQuery 3.0 - it will be removed some day from API so it is recommended to use off method instead. Article how to use off method you can find here.

Quick solutions

// 1. Removing all events from element example
   $('#my-element').unbind();

// 2. Removing all handlers for one event examples
   $('#my-element').unbind('mouseover');

// 3. Removing specific hanadler for one event examples
   $('#my-element').unbind('click', onClick);

Using jQuery it is possible to remove event in following ways.

1. Removing all events from element example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Move mouse over or out...</div>
  <br />
  <button id="my-button">Remove all events</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');
      
      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	element.bind('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.bind('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-button').bind('click', function() {
        	element.unbind();
        });
    });
   
  </script>
</body>
</html>

2. Removing all handlers for one event examples

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Click me or move mouse over...</div>
  <br />
  <button id="my-mouseover-button">Remove all mouseover events</button>
  <br /><br />
  <button id="my-mouseout-button">Remove all mouseout events</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');

      	var mouseoverCounter = 0;
      	var mouseoutCounter = 0;
      
      	function updateElement() {
        	var test = ' mouseover (' + mouseoverCounter + ');' +
                ' mouseout (' + mouseoutCounter + ');';
          
        	element.text(test);
        }
      
      	element.bind('mouseover', function() {
          	mouseoverCounter += 1;
          
          	updateElement();
        });
      
      	element.bind('mouseout', function() {
          	mouseoutCounter += 1;
          
          	updateElement();
        });

      
      	$('#my-mouseover-button').bind('click', function() {
        	element.unbind('mouseover');
        });

        $('#my-mouseout-button').bind('click', function() {
        	element.unbind('mouseout');
        });
    });
   
  </script>
</body>
</html>

3. Removing specific hanadler for one event examples

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div {
      	padding: 10px;
    	background: yellow;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-element">Click me...</div>
  <br />
  <button id="my-click-1-button">Remove click 1 event</button>
  <br /><br />
  <button id="my-click-2-button">Remove click 2 event</button>
  <script>

    $(document).ready(function() {
      
		var element = $('#my-element');

      	var click1Counter = 0;
      	var click2Counter = 0;
      
      	function updateElement() {
        	var test = 'click 1 (' + click1Counter + ');' + 
                ' click 2 (' + click2Counter + ');';
          
        	element.text(test);
        }
      
      	function onClick1() {
          	click1Counter += 1;
          
        	updateElement();
        }
      
      	function onClick2() {
          	click2Counter += 1;
          
        	updateElement();
        }
      
      	element.bind('click', onClick1);
      	element.bind('click', onClick2);
      	

      	$('#my-click-1-button').bind('click', function() {
        	element.unbind('click', onClick1);
        });

       	$('#my-click-2-button').bind('click', function() {
        	element.unbind('click', onClick2);
        });
    });
   
  </script>
</body>
</html>
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join