按钮不断只触发一次

Question

如果继续点击相同的按钮，则只会触发一次。示例：https://jsfiddle.net/h4wgxofh/，例如，如果click1点击，则第二次或多次点击应该停止点击，但与click2相同，但是，如果我点击相同的按钮，它总是会触发。另外我希望链接只触发一次，但如果其他按钮被点击则变为可用。 （考虑如果多个按钮）谢谢

HTML

<div class="wrap"> 
    <a href="#">Click1</a> 
    <a href="#">Click2</a> 
</div> 

脚本

var clicked = false; 

$('.wrap').on('click', 'a', function(){ 
    var $this = $(this); 
    clicked = true; 

    if(clicked = true){ 
    console.log($this.text()); 
    clicked = false; 
    } 
}); 

Answer 1

我可能失去了一些东西在这里，但为什么不只是事件绑定到每一个环节中.wrap和解除绑定的点击这样的：

$('.wrap a').on('click', function(){  
    console.log($(this).text()); 
    $(this).unbind('click'); 
}); 

看到这个fiddle

编辑：后在想一个链接您的评论是反弹cliking另一个之后，即使它可能不是最干净的解决方案，这样做的工作：

var onclick = function(){ 
    var $el = $(this); 
    console.log($el.text()); 
    $('.wrap a').off('click', onclick); 
    $('.wrap a').each(function(id, link){ 
     if($el.text() != $(link).text()) 
      $(link).on('click', onclick); 
    }); 
} 

$('.wrap a').on('click', onclick); 

Fiddle again

Answer 2

只需使用$(".wrap").one('click', ....

阅读jQuery的API文档。

Answer 3

每次点击一个按钮，你的脚本设置从点击到falsetrue，检查是否值是true，然后重新设置为false。你需要这样的格式，如果你只想要的按钮来触发一次（很明显，你不得不专门复制此为具有不同ID的每个按钮）：

var clicked = false; 

$('.wrap').on('click', 'a', function(){ 
    var $this = $(this); 

    if(clicked == false){ 
    console.log($this.text()); 
    clicked = true; 
    } 
}); 

Answer 4

请看下面的代码

var clicked1 = false; 
 
var clicked2 = false; 
 

 
$('.wrap').on('click', 'a', function(){ 
 
\t var $this = $(this); 
 
    \t var clickOrigin = $(this).text(); 
 
\t 
 
    \t if(clickOrigin == 'Click1' && clicked1==false){ 
 
    \t console.log("Click 1 clicked"); 
 
    \t clicked1 = true; 
 
\t } 
 
\t if(clickOrigin == 'Click2' && clicked2==false){ 
 
    \t console.log("Click 2 clicked"); 
 
    \t clicked2 = true; 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <a href="#">Click1</a> 
 
    <a href="#">Click2</a> 
 
</div>

你

还可以找到jsFiddle。

Answer 5

要禁用第一次点击后两个按钮，尝试：

var clicked = false; 

$('.wrap').on('click', 'a', function(){ 
    let $this = $(this); 

    if(!clicked){ 
    console.log($this.text()); 
    clicked = true; 
    }; 
}); 

先禁用后点击每个按钮，尝试：

$('.wrap a').each(function() { 
    let $this = $(this); 
    $this.disabled = false; 
    $this.on('click', function() { 
    if (!$this.disabled) { 
     console.log($this.text()); 
     $this.disabled = true; 
    }; 
    }); 
}); 

Answer 6

试试这个，要简单得多，这将是如果有更多的有用你有多个点击按钮

如果你已经实施了其他方式，这将是值得一试

 <div class="wrap"> 
     <a href="#" data-value="">Click1</a> 
     <a href="#" data-value="">Click2</a> 
    </div> 

    $('.wrap').on('click', 'a', function(){ 
     var $this = $(this); 

     if($this.attr("data-value") == ""){ 
     console.log($this.text()); 
     $this.attr("data-value","clicked") 
     } 
     else{ 
     console.log("Already clicked") 
     } 
    }); 

Fiddle

Answer 7

你需要两个环节来区分（我用文字在这里你可以将任何情况下）看到这个例子中，它可以帮助： -

var clicked1 = 0; 
var clicked2 = 0; 

$('.wrap').on('click', 'a', function() { 
    var $this = $(this); 
    var $text = $(this).text(); 
    //Click2 
    if ($text == 'Click1') { 
    clicked1 += 1; 
    if (clicked1 == 1) { 
     console.log($text); 
    } else { 
     return; 
    } 
    } 
    //Click2 
    if ($text == 'Click2') { 
    clicked2 += 1; 
    if (clicked2 == 1) { 
     console.log($text); 
    } else { 
     return; 
    } 
    } 
}); 

完全Demo

Answer 8

相反将代码放在点击上只需第一次点击禁用锚点标记这服务于同样的事情，你想只需找到下面的代码片段获取更多信息使用此我们可以减少往返点击功能以及

$('.wrap').on('click', 'a', function(){ 
 
$(this).addClass("disableClick"); 
 
});

.disableClick{ 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <a href="#">Click1</a> 
 
    <a href="#">Click2</a> 
 
</div>

Answer 9

I think you can disable anchor link after one click like this 

    <div class="wrap"> 

    <a href="#" id="click1">Click1</a> 

    <a href="#" id="click2">Click2</a> 
</div> 

我认为你可以在一次点击取消这些

<div class="wrap"> 
     <a href="#" id="click1">Click1</a> 
     <a href="#" id="click2">Click2</a> 
    </div> 

$(function() { 
$('#click1').on("click", function (e) { 
    $('#click1').on("click", function (e){ 
     e.preventDefault(); 
     e.preventDefault(); 
    }); 
}); 

锚链接，我认为它的帮助你。