On() and off() - Jquery
<p>Trying to understand Jquery's On() and off() a little better. Not understanding why this is not working. I want to activate and inactivate id TurnON and TurnOff Js.</p>

<p><strong>Javascript</strong></p>

<pre><code>$(document).ready(function(){

    $(document).on("click.turnon","#TurnOn",function() {
        $(document).off('click.turnon');    
        alert("Turn Off is now turned off");
    });

    $(document).on("click.turnoff","#TurnOff",function() {
        $(document).on('click.turnon');
        alert("Turn Off is now turned back on");
    });

});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="TurnOn"&gt;Turn Off&lt;/div&gt;
&lt;div id="TurnOff"&gt;Turn On&lt;/div&gt;
</code></pre>
