Bind or unbind event to control using jquery

We can bind or unbind events to controls using JQuery. The JQuery method .on() we will use for binding events and method .off() we will use for unbind the events.


Bind click event using .on() method

<script language="javascript"> $("#btnClickMe").on("click", function () { alert("click event added using JQuery"); }); </script>

.on() is the JQuery method to bind events, In the above example we have passed two parameters to the method .on(), one is event to be perforemed and another is the function to perform action when event is raised. i.e. "click" is the argument represents the event followed by function which specifies the actions to be performed.


Bind multiple events using .on() method

We can bind multiple events using .on() method, Suppose when mouse enter or leave a div you want to fire an event, both the events we can write at a time using .on() method.

Place the cursor here or move out the cursor from here to fade in fade out the div...


Bind events using .one() method

If you want to fire a particular event only once then use the method .one() to bind the event, then the event fires only once. The parameters and syntax for the method .one() is same like for the method .on()


Place the cursor here or move out the cursor from here to fade in fade out the div...


UnBind events using .off() method

If you want to unbind a particular event use .off() method. In the below example click on "Bind" button to bind the mouserover event to div to fadein fadeout and click "UnBind" to unbind the mouseover event.

Click the below buttons to bind or unbind mouse over event to fadein fadeout...