lishiyo

<div style="height:200px; width:200px;"></div>

lishiyo

$( "p" ).on( "click.myNamespace", function() { 
    /* run some callback functions named C1, C2 */ 
});
$( "p" ).on( "mouseover.myNamespace", function() { 
    /* run some callback functions named M1, M2 */ 
});

$( "p" ).off( "click.myNamespace" ); // unbinds ONLY the events in 'click.myNamespace' (C1 and C2)
$( "p" ).off( ".myNamespace" ); // unbinds all events with namespace 'myNamespace' (C1, C2, M1, M2)

lishiyo

// Tear down all click handlers on a selector
$( "p" ).off( "click" );

// Tear down a particular click handler by passing its name in the second parameter

var firstHandler = function() { console.log( "some action" ); };
var secondHandler = function() { console.log( "another action" ); };
// both click handlers attached to "p" by chaining
$( "p" ).on( "click", firstHandler ).on( "click", secondHandler );
// tear down only firstHandler - secondHandler still attached

lishiyo

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

lishiyo

//general toggling - use another variable
var x = 0;
$('#toggle-btn').click(function(e){
    if( x == 1 ){
        $(this).removeClass('clicked');
        x = 0;
    } else {
        $(this).addClass('clicked');
        x = 1;
    }

lishiyo

//calls handler once and sets up subsequent action
$( "button" ).one( "click", firstClick );
 
function firstClick() {
    $('p').text( "You just clicked this for the first time!" );

    // Set up the new handler for subsequent clicks with $(this).click
    // (omit if no further click responses are needed)
    $( this ).click( function(){ 
        $('p').text( "You\'ve clicked this before!" ); 

lishiyo

//call the accordion plugin
$('.accordion').accordion();
//trigger the custom event and set it
panel.trigger('panelOpener');
$(".panel").on("panelOpener", function() {
   // Developer 1: do Ajax stuff
});
$(".panel").on("panelOpener", function() {
   // Developer 2: do saving stuff
});

lishiyo

//traditional way
$( "#list a" ).on( "click", function() {
    console.log( $( this ).text('I was clicked!') );
});

//event delegation way
$( "#list" ).on( "click", "a", function() {
    console.log( $( this ).text('I was clicked!') );
});

lishiyo

//event listener with anonymous callback function
$('mySelector').on('myEvent', function(e) {
   /**callback function(s) here **/
});

//event listener with a defined callback function
function someFunction(e){
  /**callback function(s) here **/
};
$('mySelector').on('myEvent', someFunction );

lishiyo

//two events, same callback
$( "div" ).on( "mouseenter mouseleave", function() {
    console.log( "mouse hovered over or left a div" );
});
//two events, each with own callback 
$( "div" ).on({
    mouseenter: function() {
        console.log( "hovered over a div" );
    },
    mouseleave: function() {