html - 为什么在没有页面刷新的情况下更新下拉列表时 CSS 不起作用

Question

我正在使用 DropKick CSS/JQuery ( DropKick Link ) 来设计我的 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>

当页面第一次加载时，我看到了这个:

我正在使用 UpdatePanel、Trigger 和 ScriptManager 控件，因此当用户从 ddlMain 中选择一个选项时，ddlDrillDown 会反射(reflect)更改而无需重新加载页面。我终于让它工作了，但现在发生的事情是，如果我在 ddlMain 中选择不同的选项，DropKick 样式就会消失:

开发者控制台在页面加载时显示:

<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>

每当我选择另一个选项时，开发者控制台都会显示:

<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>

我在想它在做什么，失去了最初分配给它的样式。

有什么办法可以避免样式在不刷新页面的情况下被取掉吗？

如果每次选择都刷新页面，该样式似乎工作正常。

这是在页面上运行的脚本，它在加载时设置下拉菜单的样式:

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

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

Answer 1

我认为在 UpdatePanel 中使用 jquery 插件时，您必须在每次回发时重新实例化。所以在Ajax pageLoad中再次初始化插件例如

函数页面加载(发件人，参数){//在这里实例化

编辑:糟糕...当我打字时，MightLampshade 在我面前发布了同样的内容。