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

将click函数存储在变量中，并将其用于打开和关闭绑定，例如：

var fnNext = 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');                      
    }
}

并使用此开关： $（'＃Next'）。on（'click'，fnNext）;

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

});

Answer 2

在到达最后一页后调用$(this).off('click');时，click事件将从元素中解除绑定，不再可用。 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);            
    }

Answer 3

将此替换为最后一个if语句。

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

重新启用点击事件

3 个答案: