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.

Javascript

$(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");
    });

});

HTML

<div id="TurnOn">Turn Off</div>
<div id="TurnOff">Turn On</div>

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.

Javascript

$(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");
    });

});

HTML

<div id="TurnOn">Turn Off</div>
<div id="TurnOff">Turn On</div>

• javascript
• jquery

• refer this link andismith./blog/2011/11/on-and-off may be it is helpful for you – pkachhia Commented Feb 28, 2012 at 5:29
• I check that out @chicko. I'm still having trouble understanding – Joe Commented Feb 28, 2012 at 5:36

2 Answers 2

If you want an event handler to only fire once then take a look at .one(): http://api.jquery./one

As of jQuery 1.7 it does event delegation.

$(function(){

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

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

});

Here is a demo using .one(): http://jsfiddle/9qxfT/1/

Also, your code was just about right but you have a couple typos here:

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

$(document).on('click.turnon'); should be: $(document).off('click.turnoff');

Here is a demo of these small changes: http://jsfiddle/9qxfT/

Update

You can save the state with a variable:

$(function(){

    //declare a variable to save whether or not the `#TurnOn` element is 'on' (true) or 'off' (false)
    var isOn = true;
    
    $(document).on("click.turnon","#TurnOn",function() {

        //check to see if the flag is set to true, which means the `#TurnOn` element is 'on' already
        if (isOn) {
            alert("#TurnOn is already turned on");

        //otherwise set the `#TurnOn` element to 'on'
        } else {
            alert("#TurnOn is now turned back on");
            isOn = true;
        }
    });

    //set the `#TurnOn` element to `off` when the `#TurnOff` element is clicked
    $(document).on("click.turnoff","#TurnOff",function() {
        isOn = false;
        alert("#TurnOn is now turned off");
    });

});​

Here is a demo: http://jsfiddle/9qxfT/4/

Your logic is right, but may I suggest better implementation?

Please read this page as well: http://api.jquery./off/

Here is what I suggest:

// first put a .click event with a separate "ID" to enable another div "ID".
$('#ButtonForTurnOn').click(function () {
//while body is .on(), the ID, when clicked applies whatever effects
$("body").on("click", "#TurnOn", onlight).find("#TurnOn").addClass("clickable").text("ON switch on");
});
// enable OFF switch
$('#ButtonForTurnOff').click(function () {
$("body").on("click", "#TurnOff", offlight).find("#TurnOff").addClass("clickable").text("OFF switch on");
});

Now, for you to have an effective .off function, YOU MUST have the

"selector string match the one passed to .on() when the event handler was attached."

For example: If your $("body").on() is this,

$("body").on("click", "#TurnOff", function({
// stuff here
});

Your $("body").off() should be this,

$("body").off("click", "#TurnOff", function({
// stuff here
});

Try out this jsfiddle

Hope this helps explain things!
Just think of it as disabling something, until its turned back on.