Why the CSS is not working when the dropdownlist is updated without page refresh

Question

I am using DropKick CSS/JQuery (DropKick Link) to style my asp:DropDownList:

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:DropDownList AutoPostBack="True" OnSelectedIndexChanged="ddlMain_SelectedIndexChanged" ClientIDMode="Static" ID="ddlMain" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
        <asp:ListItem Text="BY PHYSICIAN" Value="0" Selected="True" />
        <asp:ListItem Text="BY LOCATION" Value="1" />
        <asp:ListItem Text="BY SPECIALTY" Value="2" />
        </asp:DropDownList>
        <br /><br />
        <asp:DropDownList ClientIDMode="Static" ID="ddlDrillDown" style="width: 365px;" class="default" runat="server" AppendDataBoundItems="true">
        </asp:DropDownList>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlMain" />
    </Triggers>
</asp:UpdatePanel>

When the page first loads I am presented with this:

I am using UpdatePanel, Trigger, and ScriptManager control so when the user selected an option from the ddlMain the ddlDrillDown reflects the changes without reloading the page. I have it working finally but now what is happening is the DropKick style disappears if I select a different option in ddlMain:

The developer console shows this on page load:

<div id="dk_container_ddlMain" class="dk_container dk_theme_default default" aria-hidden="true" tabindex="0" style="margin: 0 auto; display: inline-block;">

    <a class="dk_toggle dk_label" style="padding: 10px; color: rgb(43, 71, 125); width: 365px;">

        BY PHYSICIAN

    </a>
    <div class="dk_options">
        <ul class="dk_options_inner" aria-hidden="true" role="main">
            <li>
                <a data-dk-dropdown-value="0" style="padding: 20px; color: #2B477D">

                    BY PHYSICIAN

                </a>
            </li>
            <li>
                <a data-dk-dropdown-value="1" style="padding: 20px; color: #2B477D">

                    BY LOCATION

                </a>
            </li>
            <li>
                <a data-dk-dropdown-value="2" style="padding: 20px; color: #2B477D">

                    BY SPECIALTY

                </a>
            </li>
        </ul>
    </div>
    <select id="ddlMain" class="default" style="width: 365px;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$FeaturedContent$ddlMain\',\'\')', 0)" name="ctl00$FeaturedContent$ddlMain">
        <option value="0" selected="selected">

            BY PHYSICIAN

        </option>
        <option value="1">

            BY LOCATION

        </option>
        <option value="2">

            BY SPECIALTY

        </option>
    </select>

</div>

Whenever I select another option, the developer console shows this:

<select id="ddlMain" class="default" style="width: 365px;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$FeaturedContent$ddlMain\',\'\')', 0)" name="ctl00$FeaturedContent$ddlMain">

    <option value="0">

        BY PHYSICIAN

    </option>
    <option value="1" selected="selected">

        BY LOCATION

    </option>
    <option value="2">

        BY SPECIALTY

    </option>

</select>

I am thinking what it is doing is, losing the styling that it was originally assigned.

Is there any way to avoid the style being taken off without refreshing the page?

The style seems to work fine if the page refreshes for each selection.

This is the script that's running on the page which styles the drop down on load:

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

        $('.default').dropkick();
    });
</script>

Answer 1

I think when using jquery plugin inside of an UpdatePanel, you will have to re-instantiate upon every postback. So initialize the plugin again in the Ajax pageLoad e.g.

function pageLoad(sender, args) { //instantiate here }

EDIT: Oops...MightLampshade posts the same before me while I was typing.