javascript - Jquery，使用委托(delegate)事件时一键点击

Question

我有一个自己无法解决的问题，我知道你们可以帮助我。

我有一个包含动态生成内容的div，准确地说，它生成内部有内容的方 block ，每个方 block 都有一个十字图标，这样它就可以消失并做一些其他事情，问题是方 block 需要时间来淡出它可以被多次点击，这给我带来了问题，因为它减少了我声明的计数器的次数，并且与其他代码混淆了:(

这是我的代码:

$("#yha-tools").on("click", ".close", function (){
    $(this).fadeOut(500);
    cnr--;
});

我尝试使用 $("#yha-tools").one 但它并不能帮助我实现目标。

Answer 1

我不确定您有多少个按钮，但在这种情况下您当然可以使用.data()。您可以检查该元素是否尚未被单击并使用所需的操作进行处理。

$("#yha-tools").on("click", ".close", function (){
 
    var clicked = $(this).data('clicked'); // This will `undefined` in the first run.
    
    if( ! clicked || clicked != true ){ // If element has not been clicked 

        $(this).fadeOut(500);
        
        $(this).data('clicked', true); 
        
        // do whatever else you want here.
    
    } 
    
    console.log( clicked );
    
});


$('[data-action="addBtn"]').on('click', function(){

    $("#yha-tools").append('<button class="close">Close me!</button>');

});


$('[data-action="showBtns"]').on('click', function(){
    $('.close').show();
});

#yha-tools {
   padding: 10px;
   margin:10px;
   border:2px solid #ddd;
}
.close {
   margin: 0px 0px 10px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="yha-tools"></div>
<button data-action="addBtn">Add button</button>
<button data-action="showBtns">Show all buttons</button>