Using a click command once, and then disabling it

Question

Here's what I'm trying to do. I have two buttons on prompt 0, yes or no. If you click yes, the box moves to the left, fading out as it does so and Prompt 1 shows up. If you click No, the box moves to the right, prompt 2 shows up. I am using Z-index to tell it which prompt should be on top. Now, when I click yes, it goes to prompt 1 and if I click on the area where the Yes or No buttons were, nothing happens. All is fine here.

When I click on No, it fades out (Doesn't go left, but that is not my primary concern) and goes to prompt 2. BUT when I click on the REGION (the yes Cannot be seen)where the YES was, it goes to prompt 1. I've tried unbinding clicks on both scripts, but it doesn't work. What am I doing wrong?

Thanks

$(document).ready(function () {
    $('.appIMG1').one('click.appIMG1',function () {
        $(this).unbind('click');
        $("#app1").animate({
            left: '250px',
            opacity:0
        });
        $("#app2").fadeIn('slow');
    });
});


$(document).ready(function () {
    $(".appIMG2").one('click.appIMG2', function() {
        $(this).unbind('click');
        $("#app1").animate({
            right: '250px',
            opacity:0
        });
        $("#app3").fadeIn("slow");
    });
});

Z index for prompt 0 is 10, for prompt 1 is 9, for prompt 2 is 8 respectively.

Answer 1

You need to unbind the click event from everything, not just the item being clicked. Instead of using $(this).unbind('click'), you need to unbind it from all clickable elements, like this (this is an example just using the 2nd button, but it'd need to be done for both):

$(".appIMG2").one('click.appIMG2', function() {
    $('.appIMG1, .appIMG2').unbind('click');
    $("#app1").animate({
        right: '250px',
        opacity:0
    });
    $("#app3").fadeIn("slow");
    });
});