jQuery functions on GridView stop working after PostBack on page (mouseover, click)

Question

All my jQuery functions work perfectly the first time the page is loaded, after I do a postback which causes a rowfilter to be filled in for a GridView and binds the Grid again based on the rowfilter. My GridView is built up totally from code and rendered as a table. After this PostBack the function mouseover, mouseout and click on the table rows in my table do not work anymore.

I place my jQuery functions inside document.ready function. I also noticed before the postback this is added to the html of the rows:

<tr jQuery1320916="3">

So basically a sequence at the end of each row (3) and some random numbers with jQuery in front of it. After the postback this is removed from the rows.

Here is a part of my jQuery code (the first click function still works after PostBack but the functions on the GridView not anymore):

 $(document).ready(function(){
        //start click function select all
        $('input[id$="SelectDeselectAllBox"]').click(function(){            
        //start if
        if($(this).is(':checked')){
           $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',true).closest('tr').addClass('SelectedRow')
        }else{
            $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',false).closest('tr').removeClass('SelectedRow')};
        //end if

        //end click function select all
             });


        //highligth hovered row
             $('table[id^=taskgrid] tbody tr').mouseover(function () {
                 $(this).addClass('HightlightRow');
             }).mouseout(function () {
                 $(this).removeClass('HightlightRow');
             });            

        //end document ready
        });

Am I missing something, thanks in advance.

I did discover that jQuery does not find my gridview anymore by this method:

$('table[id^=taskgrid] tbody tr'), if I fill in the total ID of the taskgrid then it does work. But this is not option for me.

    //is everthing checked? start if
 if($(this).parent().find('input:checkbox:not(:checked)').length == 0){
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',true)
    }else{
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',false)};
//end if

Answer 1

The problem is, that you are using "starts with" selector:

$('table[id^=taskgrid] tbody tr')

It is better to use "ends with" selector for ASP.NET WebForms generated id. Assuming your GridView id is "taskgrid", try using following selector:

$('table[id$="taskgrid"] tbody tr')

In case you are targeting several table elements and "taskgrid" is only part of id, you can use "contains" selector:

$('table[id*="taskgrid"] tbody tr')