CODEWITHSUNDEEP
jqueryhtmlclick
haind
haind

Reputation: 1002

disable and enable div event handler click on jQuery?

var times = 0;
jQuery(window).load(function(){
   $(".banana").click(function(){
     console.log(times);
     times++;
     if(times == 3){
        $("#b1").unbind('click');
     }
    if(times == 6){
        $("#b1").bind('click');
    }
   });
});

And HTML code:
img id="b1" src=".../" class="banana"
img src=".../" alt="" class="banana"

I have preceding example as when I try to enable div event handler click.But It doesn't work.I read some topics like that I it does not solve the problem.Please,help me?

Upvotes: 2

Views: 7572

Answers (3)

Daniel
Daniel

Reputation: 4946

What you want is to prevent the dreaded stacking of click events. There are different ways of handling that, but in basic they all come down in setting a Boolean.

In your example I have set a data() tag to your #choices container starting with the value false. Upon click I change the Boolean value to true. Basically if processing=false I execute the code in the click callback.

    $("#choices").data('processing', false);

    $("#rock").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[0];
            gamePlay();
        }

    });
    $("#paper").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[1];
            gamePlay();
        }
    });
    $("#scissors").click(function () {
        if (!$(this).parent().data('processing')) {
            $(this).parent().data('processing', true);
            user = roPaSc[2];
            gamePlay();
        }
    });

After your animation, the boolean value needs to be reset . I do this in the openEyes function in the "else-statement".

   else {
            $("#you").attr({
                'src': user
            });
            $("#computer").attr({
                'src': com
            });
            $("#choices").data('processing', false);
        }

Here is the adjusted fiddle of "rock-paper-scissors": http://jsfiddle.net/gpxxn/2/

Upvotes: 1

Daniel
Daniel

Reputation: 4946

This is not the answer to your problem, but a little advice on your code.

Use "document ready" instead of load.

$(window).load(function(){...

replace with 

$(document).ready)function(){...

They will both work for you, but there is slight differences. "ready" will bind your events to your elements right after the page structure is loaded, but still before the content is loaded.

$(window).load() will wait for all the content to be loaded. That includes images.

Upvotes: 0

Kaloyan
Kaloyan

Reputation: 7352

You forgot the dot for the class (the selector should be $('.banana').

var times = 0;
jQuery(window).load(function(){
   $(".banana").click(function(){
     console.log(times);
     times++;
     if(times == 3){
        $("#b1").unbind('click');
     }
    if(times == 6){
        $("#b1").bind('click');
    }
   });
});

Upvotes: 1

Related Questions