Change style of an item inside updatepanel dynamically

Question

I have an image inside an updatepanel. When I click on the image it needs to be highlighted. I use addclass and removeclass to make this work, if it is outside updatepanel. When I put the image inside the updatepanel, the css is applied but then reverts to original after the update completes and the page is rendered.

How can I change the styling of the image inside the updatepanel dynamically?

Markup:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" class="journey-categories">
                        <ContentTemplate>
                            <ul class="journey-categories">
                                <asp:Repeater ID="rptJourneyCategories" runat="server">
                                    <ItemTemplate>
                                        <li>
                                            <a href="javascript:void(0)" data-categoryid="<%# Eval("Id") %>" data-introtitle="<%# Eval("IntroTitle") %>" data-introtext="<%# Eval("IntroText") %>">
                                                <img class="thumb" src="<%# Eval("CategoryIcon") %>" width="70" height="70" alt="" id="imgCategoryIcon" />
                                            </a>
                                            <span><%# Eval("Title") %></span>
                                        </li>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </ContentTemplate>
                    </asp:UpdatePanel>

Jquery:

$('[data-categoryid]').off('click.categories').on('click.categories', function () {
                   $(this).closest('ul').find('li.selected').removeClass('selected');
                    $(this).parent().addClass('selected');
                });

Answer 1

I got this to work with the help of EndRequestHandler

I added the following inside script document ready and it updated the styling after the update panel completed.

<script type="text/javascript">
        $(function () {
            var onDomReady = function () {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler() {
                    var type = $('[id$=ddlType]').val();
                    $('a[data-categoryid="' + type + '"').parent().addClass('selected');
                }
}});