Custom event bubbling

by dhchow

HTML

<div id="container">
    <div id="message">Message area</div>
    <div id="sibling">I get no love</div>
    <br/>
    <div id="saveButton">Save Button</div>
</div>

JavaScript

$(function(){
    $("#container").bind("saved", function(e, data){
        debugger;
        alert("oh hai!");
    });
    
    $("#message").bind("saved", function(){
        alert("hello?");
    });
    
    $("#sibling").bind("saved", function(){
        alert("I'm loved after all!");
    });
    
    $("#saveButton").click(function(){
        $("#message").trigger("saved", {music: "isAwesome"});
    });
});