Prevent jquery from multiple click function

Question

Is there a chance to adjust my code so when someone clicks button code would be executed only once? Not as many times as user clicks that button. Thanks
HTML

<button class="click_me">Click</button>
<div class="example">Some text</div>

CSS

.example{
    width:100px;
    padding:5px 5px;
    background:skyblue;
    color:white;
    display:none;
}

JQUERY

$(".click_me").click(function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});

Also check out my Fiddle!

$(".click_me").click(function() {
  $(".example").slideDown();
  $(".example").delay("2000").slideUp();
});

.example {
  width: 100px;
  padding: 5px 5px;
  background: skyblue;
  color: white;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click_me">Click</button>
<div class="example">Some text</div>

Josh Crozier · Accepted Answer · 2015-04-05 21:53:01Z

4

You could use the .one() method. In doing so, the function is only executed once.

From the jQuery docs:

The .one() method will attach a handler to an event for the elements. The handler is executed at most once per element per event type.

Updated Example

$(".click_me").one('click', function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});

answered Apr 5, 2015 at 21:53

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

serek · Accepted Answer · 2015-04-05 21:56:47Z

0

var x = 0;

$(".click_me").click(function(){
    if ( ++x === 1 ) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
    }
});

answered Apr 5, 2015 at 21:56

serek

10311 bronze badges

Comments

Timotheus0106 · Accepted Answer · 2015-04-05 22:03:26Z

as the user wrote before you can use the one function. but then the function really only got executed once.. and its not possible to execute it again.

adding and removing a class will do the trick.

$(".click_me").click(function(){
    if(!$(this).hasClass('locked')) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
        $(this).addClass('locked');
    }
});

in this case you can for instance unlock the click by removing the class from the element. in your case after 2s... like:

$(".click_me").click(function(){
    $(this) = $this;
    if(!$this.hasClass('locked')) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
        $this.addClass('locked');
    }
    setTimeout(function(){
        $this.removeClass('locked')
    }, 2000);
});

greetings timmi

mininoz · Accepted Answer · 2015-04-05 22:07:01Z

0

You can disable the button after click as well. I prefer this way because users will know that the button can not be clicked any more.

$(".click_me").click(function(){
    $(this).prop("disabled",true);
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();

});

edited Apr 5, 2015 at 22:07

answered Apr 5, 2015 at 21:57

mininoz

5,9584 gold badges27 silver badges24 bronze badges

Collectives™ on Stack Overflow

Prevent jquery from multiple click function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related