jQuery Namespaced Custome Events

HTML

<span id="btn1">[ one ]</span>
<span id="btn2">[ two ]</span>
<span id="btn3">[ one &amp; two ]</span>
<p>Open your console to see results of clicking items above.</p>
<p>I'm expecting "one" to trigger only the event listener bound to "reset.one", "two" to "reset.two", and "one &amp; two" to trigger both.</p>

CSS

span {
    cursor: pointer;
}
p {
    margin: 10px 0;
    font-style: italic;
}

JavaScript

$(document)
    .bind("reset.one", function(){ console.log("reset.one event detected");})
    .bind("reset.two", function(){ console.log("reset.two event detected");});

$("#btn1").click(function(){
    console.log("firing reset.one event");
    $(this).trigger("reset.one");
});
$("#btn2").click(function(){
    console.log("firing reset.two event");
    $(this).trigger("reset.two");
});
$("#btn3").click(function(){
    console.log("firing reset event");
    $(this).trigger("reset");
});