Question

我有一个锚链接并且需要行为，当用户点击它时我需要它然后禁用，直到页面再次加载，此时它再次重新启用（然后在用户点击时再次禁用等） ..

与表单上的提交帖子按钮完全相同的行为，可以在发布帖子之前将其禁用。

我还没有遇到过一个例子，所以希望有人可以提供帮助。

我在点击事件上尝试过e.PreventDefault，但是这会阻止链接被点击完全停止，这是我不想要的。（我需要点击它然后禁用）

示例代码..

$(function () {
  $('header.div.nav.ul').first().on("click", function (e) {

        // how do i disable the link?

  });
});

HTML示例..（我试图用文字'Blah'

来定位链接

<header class="module module-header">
  <div class="centered">
    <a href="/Open24Redesign/Accounts/Overview/Index" class="logo logo-small">
      <img src="" data-src="" data-src-retina="" alt="logo" style="opacity: 1;">
    </a>
    <nav>
      <ul class="unstyled clearfix">
        <li class="active"><a href="#">blah</a></li>
        <li><a href="">x</a></li>
        <li><a href="">y</a></li>
        <li><a href="">z</a></li>                 
      </ul>
    </nav>
  </div>
</header>

非常感谢

Answer 1

我们将创建一个标志来检查按钮是否被点击，然后如果点击它我们将禁用它，如果没有则会点击它

 var clicked = false;
 $('header.div.nav.ul li').first().find('a').on("click", function (e) {
    if(clicked===false){
       clicked=true;
    }else{
       e.preventDefault();
    }
  });

Answer 2

因为您希望点击事件仅执行一次，您应该使用.one()代替.on()

 $('header.div.nav.ul').first().one("click", function (e) {

        // do stuff
});

Answer 3

您应该使用one代替on。您还可以稍微简化选择器：

$('header nav a').one('click', function(e) {
  e.preventDefault();
  // do what you want the first time here
  // it will only get executed once
});

jquery的引用.one()

Answer 4

我在Chrome中的实验表明，.one()和e.preventDefault();的组合不足以达到此目的。第一次单击该链接时，它不使用href，而是遵循.one('click', function(e) { });中的代码。但是，如果双击锚标记，则使用href。

要解决此问题，我会将锚标记更改为没有href和.one()方法的按钮，或者我会在Muhammad Saleh的答案中对建议代码进行一些修改：

var clicked = false;
$('#aTagID').on('click', function(){
    event.preventDefault();
    if(clicked === false) {
       clicked = true;
       window.location = "..."; // or some other code.
    }
});

Answer 5

此页面上的解决方案不容易设置多个链接。

这是一个适用于任何元素的jQuery实现。

此外，它适用于同一页面上的任意数量的链接，并且非常容易实现。

选择不太可能使用的类名。

只需添加课程＆＃34; can_click_once＆＃34;任何div，锚点，按钮等，你只需要点击一次。

插入此Javascript

$(".can_click_once").click(function(e) {
    if($(this).hasClass( "qubux" )) {
        e.preventDefault();
    } else {
        $(this).addClass('qubux');
        //you can also run other stuff you need once
    }
});

单击事件后禁用锚链接

5 个答案: