How to keep jquery selector alive after ajax refresh

Question

I need a solution for the following problem.

I am using jquery odd selector to add a css to every odd item in a asp:repeater.

$(".item:odd").attr("class", "item odd");

After I do an ajax call (from updatepanel) to go to the next page in the repeater the classes aren't added to the items on the next page.

$(document).ajaxComplete doesn't seem to do the trick.

Any ideas?

Many thanks,

Arnoud

Answer 1

Just add

$(".item:odd").attr("class", "item odd");

Inside the success callback for your ajax request

Answer 2

One possible solution is to add to the page:

<script type="text/javascript">
    window.onload = function() {
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
    }

    function endRequestHandler(sender, args) {
        $(".item:odd").attr("class", "item odd");
    }
</script>

The content of the endRequestHandler will run after each AJAX request.

You will probably also need to add a ScriptManager to the page:

<asp:ScriptManager ID="ScriptManager1" runat="server">