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

Question

我有几个按钮，当我单击这些按钮时，一些divs会自动创建，但是在这里，当我下次单击已经单击的相同按钮时，我需要防止创建任何div。

代码在下面

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>

脚本

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

Answer 1

使用.one()方法。这将绑定一个仅对每个元素运行一次的处理程序。

$(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

只需在首次单击后解除绑定。

$(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

基本思想是创建点击标记。 单击后，标志设置为 true ，如果操作完成，则标志设置为 false 。 仅当flag为 false 时才应执行该操作。

赞：

(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

以下是三种可能的解决方案：

1. 通过在匿名点击功能中添加$(this).attr('disabled',true);来禁用被点击的按钮。

2. 向按钮添加启用了数据的属性并进行检查。按钮的HTML变为：<button id="append" data-enabled="true">button1</button>，然后将其添加到匿名点击功能：

   (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. 创建一个以按钮为键并将其启用/禁用布尔值作为其值的数组，并在匿名单击函数中对其进行引用。

Answer 5

1-您的代码$首先需要js，然后在document.ready：$(function(){...})之后调用，或在其末尾添加()立即呼叫（(function(){...})();）。

2-您可以使用off从元素中删除侦听器。

其他事情在您的代码中还可以。请查看结果：

$(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>