.off( "Event_Name", [ Listener_fn_reference or Event_ID ] ) - Detach an event
Events can be removed from HTML elements ($.Objs) using ".off()" function in 3 different ways.
Parameters
NameTypeDefaultPossible ValuesDescription
Event_NameStringEvent NamesEvent name which has to be removed or turned off
Listener_fn_reference / Event_IDfunction / Number function reference or Event IDEvent can be removed using listener function reference or using the Event ID which was returned by .on()
Example 1
Removing all "click" events from a div tag. For this second parameter should not be provided.
JS HTML CSS
						$.domLoaded(function() {
						
							//Attach 2 "click" events to div					
							$.get("div").on("click", function() {
								alert("First Event Trigger");
							});
							
							$.get("div").on("click", function() {
								alert("Second Event Trigger");
							});
							
							// Turn OFF all click events registered with div element
							$.get("#off").on("click", function() {
								$.get("div").off("click");
							});
							
						});						
						
<body>
	<div> Click Me </div>
	<br/>
	<input type="button" id="off" value="Turn off Click Events"/>
</body>
		div {
			display : inline-block;
			width : 100px;
			height : 100px;
			border : 1px solid red;
		}
Result
Example 2
Removing a specific "click" event from a div tag using Event ID
JS HTML CSS
		$.domLoaded(function() {
		
			//Attach 2 "click" events to div and store the event IDs	
			var ev1 = $.get("div").on("click", function() {
				alert("First Event Trigger");
			});
			
			var ev2 = $.get("div").on("click", function() {
				alert("Second Event Trigger");
			});
			
			// Turn OFF first click event using event ID
			$.get("#off").on("click", function() {
				$.get("div").off("click", ev1);
			});
			
		});						
						
<body>
	<div> Click Me </div>
	<br/>
	<input type="button" id="off" value="Turn off first Click event"/>
</body>
		div {
			display : inline-block;
			width : 100px;
			height : 100px;
			border : 1px solid red;
		}
Result
Example 3
Removing a specific "click" event from a div tag using listener function reference
JS HTML CSS
		$.domLoaded(function() {
		
			//Attach 2 "click" events to div and store the event IDs	
			var listen = function() {
				alert("First Event Trigger");
			}
			
			$.get("div").on("click", listen);
			
			var ev2 = $.get("div").on("click", function() {
				alert("Second Event Trigger");
			});
			
			// Turn OFF first click event using function reference
			$.get("#off").on("click", function() {
				$.get("div").off("click", listen);
			});
			
		});						
						
<body>
	<div> Click Me </div>
	<br/>
	<input type="button" id="off" value="Turn off listen Click event"/>
</body>
		div {
			display : inline-block;
			width : 100px;
			height : 100px;
			border : 1px solid red;
		}
Result