ASP.NET GridView and jQuery

Question

iam using jquery to implement check and uncheck functionality in asp.net gridview. the following code works when iam in the initial page of the gridview, page index changing event in gridview it's not working.

<script type="text/javascript">
    $(document).ready(function () {

        var checkBoxSelector = '#<%=grdvw_ClientIntakeList.ClientID%> input[id*="chck_itemSelect"]:checkbox';

        //header checkbox
        $('[id$=chck_headSelect]').click(function () {

            if ($(this).is(":checked")) {

                $(checkBoxSelector).attr('checked', true);

            }
            else {

                $(checkBoxSelector).attr('checked', false);
            }
        });

    });
</script>

Answer 1

Use .live("click" instead of .click()

$('[id$=chck_headSelect]').live("click", function () {

Since your checkbox elements that are part of the other pages are generated at runtime the click handler will not be assigned to them. You will have to use .live() to attach events to all current and runtime generated elements.

Read .live()

Instead of using an id attribute selector you can use a class selector. Assign a class to the checkboxes and then use the class selector.

Added a class headselect to checkboxes.

Something like

$("input:checkbox.headselect").live("click", function(){
});

will assign click events to all current and runtime generated checkboxes with classname headselect.