Reputation: 1002
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
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
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
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