CODEWITHSUNDEEP
jquery
MrThunder
MrThunder

Reputation: 745

Jquery unbind click then delay then bind click

Hi I wish to unbind a click then delay then bind the click. When the page loads I do not want to be able to click the link for a set period of time.

To be honest I have no idea how to achieve this, I am pretty much guessing how to do it as my Jquery knowledge is very limited.

Thanks 

$(document).ready(function() {      
    $(".colourise-it").unbind('click').delay(4000).bind('click')(function() {
            $('.colourise-it').click(function() {
            $('body').toggleClass('colourise');
           });
        });
 });

Upvotes: 0

Views: 489

Answers (2)

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

When the page loads I do not want to be able to click the link for a set period of time.

You can use a native JS function setTimeout which lets you execute a function after a given timeout.
Wait until a page will be loaded. Then set a timeout for 4000 milliseconds to bind a click and toggle CSS class.

$(document).ready(function() {
    setTimeout(function() {
        $(".colourise-it").on('click', function() { // ... });
        $('body').toggleClass('colourise');
    }, 4000);
});

Take a look at this JSFiddle with a working sample: DEMO

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29693

No need to bind or unbind Just add a disabled class on page load as below and enable it after some time:

DEMO

A small CSS

.disableClick{
    pointer-events: none;
}

JS

$(document).ready(function(){
   $('.colourise-it').addClass('disableClick');
    setTimeout(function(){
        $('.colourise-it').removeClass('disableClick');
    },4000);
    $('.colourise-it').bind('click',function(){
        $('body').toggleClass('colourise');
    });
});

Upvotes: 1

Related Questions