CODEWITHSUNDEEP
javascriptjquery
Troy Bryant
Troy Bryant

Reputation: 1024

Re enable click event

I have some paging features that I've written. What I'm trying to do is when user gets to the end of the paging results display End of records. When the back link is click then the paging is re enabled allowing the user the option to either click next or back based on where they currently are. Right now I have it the user can flip through the pages until the end. The message is displayed and then they can click back to the beginning. Problem is when they click next I can not get the link reactivated. I've tried the jquery on / off and also the enabled disabled attributes. I'm sure there is a better way but for now this is what I'm starting out with. Thank you in advance.

Here is the code going forward

    $('#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');                      
    }

});

Here is the code to go backwards:

    $('#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);            
    }

});

Upvotes: 1

Views: 443

Answers (3)

grateDvyde
grateDvyde

Reputation: 41

When you call $(this).off('click'); after reaching the last page, the click event is unbound from the element and is no longer available. http://api.jquery.com/off/.

The problem is when you call $('#Next').on('click'); you are only passing in the name of the event and no function to execute. When you use .on() you must pass the name of the event and a function to execute. http://api.jquery.com/on/.

Try something like

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

Attach the event to #Next 

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

To enable the click event again

$('#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);            
    }

Upvotes: 1

Huan Zhang
Huan Zhang

Reputation: 1085

Replace this with your last if statement with this.

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

Upvotes: -1

Irvin Dominin
Irvin Dominin

Reputation: 30993

Store the click function in a variable and use it for on and off bindings like:

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

and use this of on and off: $('#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);            
    }

});

Upvotes: 1

Related Questions