如何从锚链接中删除点击事件？

问题描述：

我一直在做一些研究到这一点，到目前为止，所有的我已经能够找到它，你只能删除事件侦听器。不是实际的事件。例如，我有一个锚点链接，点击一次后。我不希望用户能够再次点击它。我怎么能这样做呢？如何从锚链接中删除点击事件？

我有一个非常简单的设置如下：

 <script> 

      $(document).on('click', '.prevPage', function() { 
    alert("In"); 
    if (parseInt($('.nextPage').attr('rel')) > 2) { 
     //TAKE OFF CLICK  
     currentPage -= 1; 
     rowsShown = $('.pageSize').val(); 
     skip = (currentPage * rowsShown) - rowsShown; 
     GetMoreData(skip, 2); 
    } 
}); 

function RePager(skip, btnClicked) { 
    /* ** NEED TO WORK OUT THE INPUT BOX ** */ 
    if (ReportType() == 2) { 
     var FilteredData = $('.BoolFiltered').val(); 
     var totalPages = GetTotalPages(); 
     if (totalPages == 0) { 
      totalPages = 1; 
     } 
     var newPrevPage = currentPage - 1; 
     var newNextPage = currentPage + 1; 
     /* 
     1 - First Page 
     2 - Prev Page 
     3 - Next Page 
     4 - Last Page 
     4+ - Ajax filter 
     */ 
     switch (btnClicked) { 
      case 1: 
       $('.prevPage').attr('rel', 1); 
       $('.nextPage').attr('rel', 2); 
       $('.lastPage').attr('rel', totalPages); 
       $('.pagedisplay').val(currentPage + '/' + totalPages); 
       break; 
      case 2: 
       $('.prevPage').attr('rel', newPrevPage); 
       $('.nextPage').attr('rel', newNextPage); 
       $('.lastPage').attr('rel', totalPages); 
       $('.pagedisplay').val(currentPage + '/' + totalPages); 
       //PUT CLICK BACK ON 
       break; 
      case 3: 
       $('.prevPage').attr('rel', newPrevPage); 
       $('.nextPage').attr('rel', newNextPage); 
       $('.lastPage').attr('rel', totalPages); 
       $('.pagedisplay').val(currentPage + '/' + totalPages); 
       break; 
      case 4: 
       $('.prevPage').attr('rel', totalPages - 1); 
       $('.nextPage').attr('rel', totalPages); 
       $('.lastPage').attr('rel', totalPages); 
       $('.pagedisplay').val(totalPages + '/' + totalPages); 
       break; 
      default: 
       currentPage = 1; 
       $('.prevPage').attr('rel', 1); 
       $('.nextPage').attr('rel', 2); 
       $('.lastPage').attr('rel', totalPages); 
       $('.pagedisplay').val(currentPage + '/' + totalPages); 

     } 

    } 
} 


     </script> 

<body> 
    <a class="prevPage">WORK</a> 
</body>

编辑：我会去到更多的细节。用户点击该事件后，我想禁用点击。功能结束后，我想让用户再次点击按钮。我总是可以改变课程名称，但我不想这样做，我宁愿找一个更优雅的解决方案。

编辑2：检查上面的代码中实际问题

你可以简单地关掉'click'事件，比如'$（ “.test”）。off（'click'，function（e）{}）;' – Akshay

'函数结束后'你在说哪个函数？如果您正在进行任何异步操作，请提供相关代码 –

@ A.Wolff检查实际代码的编辑。 –

答

最简单的办法是使用，而不是试图消除听众和什么，而不是CSS。

jQuery有一个.addClass()功能，您可以使用。

范例CSS

.disabled { 
    pointer-events: none; 
    cursor: default; 
}

那么你的脚本代码

$(document).ready(function() { 
    $(".test").click(function() { 
    $(this).addClass("disabled"); 
    }); 
});

这样，你可以很容易地做到.removeClass()以及

Ya在任何异步操作完成时删除类。但是您应该委托它：'$（document）.on（'click'，'.prevPage：not（.disabled）'，function（）{...}）;' –

'$（document）.on（'单击'，'.prevPage：not（.disabled）'，function（）{$（this）.addClass（“disabled”）; doSomeAsyncRequest（）。always（function（）{$（this）.removeClass（'disabled' ）;}。bind（this））;' –

好的解决方案，但我不想这样做使用css +1 –

答

你需要首先把它包在DOM已准备就绪。否则，脚本将在元素准备好之前运行。然后，您可以使用event.preventDefault()禁用正常点击。

$(document).ready(function() { 
    $(".test").click(function (e) { 
    e.preventDefault(); 
    }); 
});

事件被委派，以便工作。 – Jai

我不认为这是所问的。 – void

检查编辑更新的信息 –

答

您可以使用.one()代替：

$(document).one('click', '.test', function(e) { 
 
    $('pre').append(e.type+'ed'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="test">WORK</a> 
 
<br> 
 
<pre></pre>

按照您的编辑：

您可以使用.on()来绑定事件和使用.off()来unbin d it。是这样的：

function bindClick(e) { 
 
    $('pre').append(e.type + 'ed'); 
 
    $(document).off('click', '.test', bindClick); // unbound click 
 
    setTimeout(function() { 
 
    $(document).on('click', '.test', bindClick); // bound again after 2 sec 
 
    }, 2000); 
 
} 
 

 
$(document).on('click', '.test', bindClick); // bound click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="test">WORK</a> 
 
<br> 
 
<pre></pre>

检查编辑更新的信息 –

@AndrewKilburn好吧，那么它不在问题中，因此'.off（）'可以与'.on（）'事件监听器一起使用。 – Jai

答

$(document).on('click', '.test', function (e) { 
     e.preventDefault(); 
     $(this).off("click"); 
});

使用.off

$(document).off('click', '.test');

检查编辑更新信息 –

如何从锚链接中删除点击事件？

相关推荐