如何防止第二次单击按钮上的单击事件

Question

I have few buttons, when I click on those buttons some divs are creating automatically, but here I need to prevent to create any div when I click on next time on the same button on which I already clicked.

Code is below

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="details">
    <button id="append">button1</button>
    <button id="append">button2</button>
    <button id="append">button3</button>
    <div id="parent"></div>
</div>

SCRIPT

(function(){
    var count = 0;
    $('button').click(function(){
        $('#parent').append('<div id="first'+count+'">text</div>');
        count++;
    });
});

Answer 1

Use the .one() method. This binds a handler that only runs once for each element.

 $(function() { var count = 0; $('button').one("click", function() { $('#parent').append('<div id="first' + count + '">text</div>'); count++; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="details"> <button id="append">button1</button> <button id="append">button2</button> <button id="append">button3</button> <div id="parent"></div> </div> 

Answer 2

Just unbind it after first click.

$(function(){
  var count = 0;
  $('button').click(function(){
    count = Number($(this).data('click')||0);
    if(count>0){
       $(this).unbind("click");
    }

    count = count+1;
    $(this).data('click',count);         

    $('#parent').append('<div id="first'+count+'">text</div>');
  });
});

Answer 3

Basic idea is creating click flag. Flag is set to true once clicked and set to false if action is finished. The action should be performed only if flag is false .

Like this:

(function(){
    var count = 0;
    var flag = false;

    $('button').click(function(){
        if(flag) return false; // Disable when action is on

        // Action starts
        flag = true;
        $('#parent').append('<div id="first'+count+'">text</div>');
        count++;

        // Action ends
        flag = false;
    });
});

Answer 4

Here are three possible solutions:

1. Disable the button that was clicked by adding $(this).attr('disabled',true); inside anonymous click function.

2. Adding a data-enabled attribute to the buttons and checking it. Your HTML for a button becomes like this: <button id="append" data-enabled="true">button1</button> and then you add this to the anonymous click function:

    (function(){ var count = 0; $('button').click(function(){ if ( $(this).data('enabled') == 'false' ) return; else { $(this).data('enabled', 'false'); $('#parent').append('<div id="first'+count+'">text</div>'); count++; } }); }); 

3. Create an array that with the button as keys and their enabled/disabled boolean value as their value and refer to that in the anonymous click function.

Answer 5

1- Your code needs a $ in first of your js to calling it after document.ready : $(function(){...}) , or adding () at end of it for calling Immediately ( (function(){...})(); ).

2- You can use off to remove a listener from an element.

other things is ok in your code. please look at result:

 $(function(){ var count = 0; $('button').click(function(){ $('#parent').append('<div id="first'+count+'">text</div>'); count++; $(this).off("click");//One of benefits of this way is: you can add some conditions for removing this event. > if(...) $(this).off("click"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="details"> <button id="append">button1</button> <button id="append">button2</button> <button id="append">button3</button> <div id="parent"></div> </div>