javascript - 重新启用点击事件

Question

我已经编写了一些分页功能。我想做的是当用户到达分页结果末尾时显示记录结束。单击后退链接后，将重新启用分页，允许用户根据当前所在位置选择单击下一步或后退。现在我有了它，用户可以翻阅页面直到最后。将显示该消息，然后他们可以单击返回开头。问题是当他们单击下一步时我无法重新激活链接。我已经尝试过打开/关闭 jquery 以及启用的禁用属性。我确信有更好的方法，但现在这就是我开始的方法。先感谢您。

这是接下来的代码

    $('#Next').click(function (e) {
    e.preventDefault()
    currentPageNumber += 1;
    if (currentPageNumber == 1) {
        $('.pageNumber').text(currentPageNumber);
        $("#displayMe").empty();
        loadData(currentPageNumber);
    }
    else {
        $("#displayMe").empty();
        $('.pageNumber').text(currentPageNumber);
        loadData(currentPageNumber);
    }
    if (currentPageNumber == maxPage) {
        $(this).html("End of Records");
        $(this).off('click');                      
    }

});

这是向后退的代码:

    $('#Back').click(function (e) {
    e.preventDefault()        
    currentPageNumber -= 1;
    if (currentPageNumber < maxPage) {
        $("#Next").html("Next 5 >>");
        $('#Next').on('click');
        $('.pageNumber').text(currentPageNumber);
        $("#displayMe").empty();
        loadData(currentPageNumber);            
    }

});

Answer 1

当到达最后一页后调用 $(this).off('click'); 时，click 事件与元素解除绑定(bind)，不再可用。 http://api.jquery.com/off/ .

问题是，当您调用 $('#Next').on('click'); 时，您仅传递事件名称，而没有要执行的函数。当您使用 .on() 时，您必须传递事件名称和要执行的函数。 http://api.jquery.com/on/ .

尝试类似的事情

function myClickEvent(e) {
    e.preventDefault()
    currentPageNumber += 1;
    if (currentPageNumber == 1) {
        $('.pageNumber').text(currentPageNumber);
        $("#displayMe").empty();
        loadData(currentPageNumber);
    }
    else {
        $("#displayMe").empty();
        $('.pageNumber').text(currentPageNumber);
        loadData(currentPageNumber);
    }
    if (currentPageNumber == maxPage) {
        $(this).html("End of Records");
        $(this).off('click');                      
    }
}

将事件附加到#Next

$('#Next').on('click', myClickEvent);

再次启用点击事件

$('#Back').click(function (e) {
    e.preventDefault()        
    currentPageNumber -= 1;
    if (currentPageNumber < maxPage) {
        $("#Next").html("Next 5 >>");
        $('#Next').on('click', myClickEvent);
        $('.pageNumber').text(currentPageNumber);
        $("#displayMe").empty();
        loadData(currentPageNumber);            
    }