CODEWITHSUNDEEP
jquerydouble-click
user1320948
user1320948

Reputation: 21

jQuery - Disabling double click not working

I'm trying to disable double clicking in a DIV. I've tried several different recommended solutions but they don't seem to work.

I have a statement that is showing and true false buttons that the user can choose. It doesn't matter if the user chooses true or false, because the #answerContainer appears and gives you the answer, along with a link that says "NEXT STATEMENT". My problem is that when the user double clicks "NEXT STATEMENT", the animations that are set start overlapping.

Is it going to be possible to disable double clicking on #nextS (NEXT STATEMENT") link?

Thanks!

$(document).ready(function(){

var questions = ["This is question 1","This is question 2","This is question 3"];

var answers = ["<strong>FALSE: </strong> This statement is not true.","<strong>TRUE: </strong> This statement is true.","<strong>TRUE: </strong> This statement is true."];

$('#nextS,#bTrue,#bFalse').css( 'cursor', 'pointer' );

var z = 0;

$('#questions').html(questions[z]);

    $('#bTrue,#bFalse').bind('click',function(e){
    e.preventDefault();
$(this).prop('disabled', true); // DISABLE
        $('#bTrue,#bFalse').fadeOut('fast', function(){
        // Animation complete
        $('#right').animate({top:0}, 800, function() {
            //callback
            $('#true-false').css('background-image', 'url(' + tf[z] + ')');
            $('#true-false').fadeIn();
            $('#answerContainer').html("&nbsp;");
            $('#answerContainer').fadeIn(800, function() {
            $('#bTrue,#bFalse').prop('disable', false); // ENABLE after container fades out
                //callback
                $('#answerContainer').html(answers[z] + "<p id=\"nextS\"><a href=\"#\">NEXT STATEMENT</a></p>");
                //NEXT STATEMENT CLICK
$('#nextS').bind('click',function(e){
e.preventDefault();
$(this).prop('disabled', true); // DISABLE
z++;
$('#true-false').fadeOut();
$('#answerContainer').fadeOut(800, function(){
    //callback
    $('#right').animate({top:175}, 800, function(){
        $('#questions').html(questions[z]);
            checkZ();
            //alert(questions[z]);
        });
    });
});
//NEXT STATEMENT CLICK  
            $('#nextS').prop('disable', false); // ENABLE after container fades out


            });
        });
    });
});
});

Upvotes: 0

Views: 823

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34406

Try disabling the link - 

//NEXT STATEMENT CLICK
$('#nextS').bind('click',function(e){
    e.preventDefault();
    $(this).prop('disabled', true); // DISABLE
    z++;
    $('#true-false').fadeOut();
    $('#answerContainer').fadeOut(800, function(){
        //callback
        $('#right').animate({top:175}, 800, function(){
            $('#questions').html(questions[z]);
                checkZ();
                //alert(questions[z]);
            });
            $('#nextS').prop('disable', false); // ENABLE after container fades out
        });
});
//NEXT STATEMENT CLICK

I'm not sure without seeing more, but you may want to re-enable the link later in your process than I have here.

Upvotes: 2

Related Questions