jQuery Event Handlers

by rsmclaug

HTML

<input id="addBlue" type="button" value="Add a blue button"/>
<input id="addRedToBlue" type="button" value="Add a red button"/>
<input id="addGreenToBlue" type="button" value="Add a green button"/>
<input id="addPurpleToBlue" type="button" value="Add a purple button"/>

<div id="blueButtons">
    <input class="blue" type="button" value="Original"/>
</div>

<input id="addRed" type="button" value="Add a red button"/>

<div id="redButtons">
    <input class="red" type="button" value="Original"/>
</div>

<input id="addGreen" type="button" value="Add a green button"/>

<div id="greenButtons">
    <input class="green" type="button" value="Original"/>
</div>

<input id="addPurple" type="button" value="Add a purple button"/>

<div id="purpleButtons">
    <input class="purple" type="button" value="Original"/>
</div>

CSS

.blue {
    color: blue;
}

.red{
    color: red;
}

.green{
    color: green;
}

.purple {
    color: purple;
}

#blueButtons, #redButtons, #greenButtons, #purpleButtons {
    width: 100px;
    padding: 5px;
    margin: 5px 0 40px 0;
}

#blueButtons {
    border: 1pt solid blue;    
}

#redButtons {
    border: 1pt solid red;    
}

#greenButtons {
    border: 1pt solid green;    
}

#purpleButtons {
    border: 1pt solid purple;    
}

JavaScript

$("#addBlue").click(function(){
    $("#blueButtons").append("<br/><input class='blue' type='button' value='.click'/>")
});
    
$("#addRedToBlue").click(function(){
    $("#blueButtons").append("<br/><input class='red' type='button' value='.live'/>")
});
    
$("#addGreenToBlue").click(function(){
    $("#blueButtons").append("<br/><input class='green' type='button' value='.delegate'/>")
});
    
$("#addPurpleToBlue").click(function(){
    $("#blueButtons").append("<br/><input class='purple' type='button' value='.on'/>")
});

    
$("#addRed").click(function(){
    $("#redButtons").append("<br/><input class='red' type='button' value='.live'/>")
});
    
$("#addGreen").click(function(){
    $("#greenButtons").append("<br/><input class='green' type='button' value='.delegate'/>")
});
    
$("#addPurple").click(function(){
    $("#purpleButtons").append("<br/><input class='purple' type='button' value='.on'/>")
});

/**
 * jQuery 1.0+
 */ 
$(".blue").click(function(){
    alert("blue!");
});
    
/**   
 * jQuery 1.3+ DEPRECATED
 */ 
$(".red").live("click", function(){
    alert("red!");
});
  
/**
 * jQuery 1.4.3+
 */    
$("#greenButtons").delegate(".green", "click", function(){
    alert("green!");
});
    
/**
 * jQuery 1.7+
 */     
$("#purpleButtons").on({
  click: function(){
    alert("purple");
  },
  hover: function(){
    alert("hover purple");
  }
});