CODEWITHSUNDEEP
jquery
can
can

Reputation: 214

How to disable function on click event?

I have a button which toggle 2 divs. And a function which do the same thing after 5 seconds. But when the user click on the button, the function also works. How can I disable the function when the button is clicked?

This is what I want: If click on .turn-button, disable function show_back.

My code:

 $(document).ready(function() {

    // Toggle
    $(".toggle-class").hide();

    $(".turn-button").click(function() {
        $(".toggle-class").slideToggle(500);
        $(".toggle-class-back").slideToggle(500);
    }); 

    // Show back after 7 seconds
    $(function(){
       function show_back(){
            $(".toggle-class").slideToggle(500);
            $(".toggle-class-back").slideToggle(500);
       };
       window.setTimeout( show_back, 5000 ); // 5 seconds
    });

});

Upvotes: 0

Views: 183

Answers (3)

arul prince
arul prince

Reputation: 303

you can use .off() function to disable click event

$("p").on("click", function() {
  $(this).css("background-color", "red");
  $("#clicked").html("clicked");
});
$("button").click(function() {
  $("p").off("click");
  $("#clicked").html("disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <p> Test Data</p>
  <div id="clicked"></div>

  <button>Click</button>
</body>

</html>
Click this paragraph to change its background color and changed div text to clicked.

Click the button below and then click on this paragraph (the click event is removed).

Upvotes: 2

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

By using clearTimeout();

$(document).ready(function() {
    // Toggle
    $(".toggle-class").hide();
    var Timer = setTimeout( show_back, 5000 ); // 5 seconds
    $(".turn-button").click(function() {
        clearTimeout(Timer);
        $(".toggle-class , .toggle-class-back").slideToggle(500);
    }); 
});

// show back function
function show_back(){
    $(".toggle-class , .toggle-class-back").slideToggle(500);
};

Upvotes: 0

Remling
Remling

Reputation: 211

you could try this:

 $(document).ready(function() {
    var clicked = false;
    // Toggle
    $(".toggle-class").hide();

    $(".turn-button").click(function() {
        clicked = true;
        $(".toggle-class").slideToggle(500);
        $(".toggle-class-back").slideToggle(500);
    }); 

    // Show back after 7 seconds
    $(function(){
       function show_back(){
            if(!clicked){   
                $(".toggle-class").slideToggle(500);
                $(".toggle-class-back").slideToggle(500);
            }
       };
       window.setTimeout( show_back, 5000 ); // 5 seconds
    });
});

Upvotes: 1

Related Questions