Question

如何在点击一次后禁用button课程的所有链接？我希望能够在一个地方做到这一点，而不必单独改变所有这些......任何想法？

到目前为止，我得到了这个：

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").click(function() { return false; });

但是第二个事件没有解雇..

Answer 1

这就是我想要的：

$("a.button").one("click", function() {
    $(this).click(function () { return false; });
});

使用“按钮”类绑定所有链接。仅运行一次匿名函数（因此为“one”），重新绑定链接以返回false。

如果你想让它看起来更像你拥有的东西，试试这个：

$("a.button").click(function() { $(this).attr("disabled", "disabled"); });
$(document).click(function(evt) {
     if ($(evt.target).is("a[disabled]"))
          return false;
});

Answer 2

如果您使用链接，我有一个优雅的解决方案：

function do_nothing() { 
  return false;
}

// prevent a second click for 10 seconds. :)
$('.prevent_doubleclick').live('click', function(e) { 
  $(e.target).click(do_nothing); 
  setTimeout(function(){
    $(e.target).unbind('click', do_nothing);
  }, 10000); 
});

https://github.com/ssoroka/prevent_doubleclick.js

我很快就会加入对表单的支持。

Answer 3

是的，设置一个值来跟踪这个：

$("a").click(function (){
  if( $(this).data("clicked") ){
    return false;
  }
  $(this).data("clicked", true);
  return true;
});

Answer 4

创建一个JS - 在每个页面上包含它（如果你有一个页面，则包含在你的主页中。）

我认为像

$(document).ready(function(){
  $('.button').click(function(){
    $('.button').click(function(e) {
      e.preventDefault();
    });
  });
});

Answer 5

这适用于IE和Chrome，其中包含锚标记上的href和onclick属性：

＆＃13;

@NgModule({
  imports: [
    ...
  ],
  declarations: [
    ...
  ],
  providers: [ReportService],  //<--inject service here to be global to module
  bootstrap: [AppComponent]
})

＆＃13;

Answer 6

您也可以在锚标记上抛出一个类并检查点击：

$('a.button').click(function(){ 
  if($(this).hasClass('clicked')) return false;
  else { 
    $(this).addClass('clicked'); 
    return true;
  }
});

使用该类，您可以在第一次单击后为链接执行一些额外的样式。

Answer 7

$('a.button').bind('click', function(){
    alert('clicked once'); // for debugging
    // remove all event handlers with unbind()
    // add a new function that prevents click from working
    $(this).unbind().bind('click', function(){
        alert('clicked a 2nd time or more'); // for debugging
        return false;
    });
});

Answer 8

$("a.button").bind('click', function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live('click', function() { return false; });

是吗？第一行使用类按钮绑定到所有a元素一个函数，该函数将禁用属性（btw无效的a-elements）设置为禁用。

第二个函数使用jQuery实时事件重新绑定将“禁用”函数绑定到已禁用和属性的所有a元素实例

如果需要，请检查jQuery Event documentation以获取有关这两个使用功能的更深入信息

Answer 9

事件仅绑定在document.ready上，您应该使用.live事件来处理：

$("a.button").live("click", function() { $(this).attr("disabled", "disabled"); });
$("a[disabled]").live("click", function() { return false; });

Answer 10

您可能必须在表单和句柄按钮上禁用ajax提交：

 $("form").attr("data-ajax", "false");
    $("[type='submit']").click(function (e) {
        var form = $("form");
        if (!this.disabled) {
            if (form.valid()) {
                this.disabled = true;
                form.submit();
            }
        }
    });

Answer 11

我喜欢亚当提供的解决方案，但这对我不起作用。如果您在点击后使用.one()来禁用链接时遇到问题，我建议您尝试以下操作。

$("a.button").bind("click", function( event ) {
    // Unbind the click event from anchors with class button
    $(this).unbind( event );
});

Answer 12

我相信你在谈论一个常见的问题，你只是不希望一次点击多次链接/按钮。也许你真的不想禁用按钮或链接，你只想在第一次点击完成之前阻止“再次点击”。

如果您希望点击之间有延迟，可以选择以下选项之一：

//prevent double click
$(document).on('click', ".one-click", function(e){

    if($(this).data('lastClick') + 1000 > new Date().getTime()){

        e.stopPropagation();
        return false;
    }
    $(this).data('lastClick', new Date().getTime());
    return true;

});

接下来需要做的是给按钮或链接一类“一键”。

事件已注册到文档中，它也适用于动态加载的html。

代码中的1000是延迟一秒。即，在第一次点击的1秒内，忽略任何点击。根据需要更改延迟值。

当我想停止不止一次弹出Bootstrap Modal（已修改和启用Ajax）时，我遇到了这个问题。上面的解决方案没有帮助，需要使用Bootstrap模式的'show'和'hide'事件来防止双重弹出。

Answer 13

$('a.disableAfterOneClick').on('click', function(e){
    e.preventDefault(); //disabling default behaviour
    if (this.href) //checking if href attr is stil set
    {
        href = this.href; //saving current href for it will be removed
        $(this).removeAttr("href"); //removing href
        window.location.href = href; //redirecting user to href
    }
});

Answer 14

我正在使用它来禁用“click”事件发送两次（而不是“双击”事件）。适用于IE＆gt; = 9，firefox，webkit或chrome。第一次单击事件会在一段时间内禁用按钮/链接/跨度。经过一段时间后，按钮/链接/跨度启用，用户可以单击它。

$(document).ready(function() {
/** 
 * disable double click 
 **/
document.addEventListener('click', function(event) { 

    var targetElement = event.target || event.srcElement;
    var target = $(targetElement);

    var eLink = target.prop("tagName") === 'A'; // hypertext link
    var eButton = target.prop("tagName") === 'BUTTON'; // button 
    var fButton = target.prop("tagName") === 'SPAN' && target.parent().parent().hasClass("fbutton"); // flexigrid buttons

    if ( eLink || eButton || fButton ) {

        if ( target.data("clicked") ) {
            event.stopPropagation();
            event.preventDefault();
            if ( window.console ) {
                console.log("double click event disabled");
            }
            return false;
        } else {

            target.data("clicked", true);
            target.prop('disabled', true);
            target.addClass("clicked");

            setTimeout(function() {
                target.data("clicked", false);  
                target.prop('disabled', false);
                target.removeClass("clicked");

            }, 500); // Do something after 500 millisecondes
            return true;
        }
    }

    }, true);


});

Answer 15

当您使用功能

时，这应该有效

function isEquals(self $obj){
return serialize($obj)===serialize($this)
}

Answer 16

你总是对一件简单的事情感到很麻烦。首次点击时设置延迟自我重置变量。这会在一段时间内禁用第二次点击。简单！

    var formvar=1;

$('#myForm').submit(function() { 
    if(formvar==1) 
        {
        $(this).ajaxSubmit(options); // or do what ever normally do

        setTimeout(function(){formi=1}, 3000);
        formvar=0;
        }
    else alert("no dbl clicking");


    });

禁用链接以停止在JQuery中双击

16 个答案: