TAGS :Viewed: 12 - Published at: a few seconds ago

[ Jquery Data Table row event getting stuck if i move between the Pages ]

I have a Jquery Datatable , with each row having "more" link, which will show the full text on clicking. It's working on every page except when I click a row and go to the next page and come back again, it does nothing (stuck). But if I try to move to any other next page and come back, it'll start working. It works fine in debug mode also.

Here is the code sample:-

  $(table).bind( 'draw', clickMore); 

function clickMore (moretext,lesstext) {

    $('#notesTable tbody tr td').on('click', '.morelink', function(){
            if ($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html("more");
            } else if($(this).hasClass("more")){
                $(this).addClass("less");
                $(this).html("less");
            } else if($(this).hasClass("morelink")){
                $(this).addClass("less");
                $(this).html("less");
                }
                $(this).parent().prev().toggle();
                $(this).prev().toggle();

            return false;
        });  
    }

any help would be great.

Answer 1


Attach click event handler as shown below:

$('#notesTable tbody').on('click', '.morelink', function(){

});

You attach event handler directly to td elements but with jQuery DataTables only current (first) page elements exist in DOM.