Question

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

我的设置非常简单：

      <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：检查以上代码是否存在实际问题

Answer 1

您可以改为使用.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()取消绑定。像这样的东西：

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>

Answer 2

最简单的方法是使用CSS而不是尝试删除侦听器和什么不是。

jQuery有一个.addClass()函数可以使用。

CSS示例

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

然后是您的脚本代码

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

这样你就可以轻松地.removeClass()

了

Answer 3

你最初需要把它包装成dom。否则，脚本将在元素在dom上准备好之前运行。然后，您可以使用event.preventDefault()禁用正常点击。

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

Answer 4

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

使用.off

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

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

4 个答案: