How to trigger and handle custom events in jQuery

by rmadhuram

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <input type="text" id="payload">
    <button id="clickMe" type="button" class="btn btn-primary">Click Me!</button>
</div>

JavaScript

$(document).ready(function () {
    $("#clickMe").click(function () {
        $(document).trigger("woo-hoo", $("#payload").val()); // trigger global event
    });

    $(document).on("woo-hoo", function (e, payload) {  // handle a global event
        $(".container").append('<br>clicked!   payload is : ' + payload);
    });
});