ASP.NET中使用jQuery Chosen遇回发后样式丢失问题求助

问题排查与修复步骤 #

• 改用类选择器替代固定ID：你当前用的$("#MainContent_ddlTabla")是固定ID选择器，ASP.NET服务器控件的ID会因母版页、命名容器等因素在回发后变化，改用类选择器更稳定：

  function PageLoaded(sender, args) {
      $(".chosen-select").chosen();
  }
  

• 先销毁旧实例再重新初始化：回发后原DOM元素可能被替换，但Chosen的绑定残留会导致新元素无法正常渲染，先销毁旧实例再初始化：

  function PageLoaded(sender, args) {
      $(".chosen-select").chosen('destroy').chosen();
  }
  

• 调整脚本注册时机：ASP.NET AJAX的生命周期中，$(document).ready可能在PageRequestManager初始化前执行，改用Sys.Application.add_load确保事件绑定生效：

  Sys.Application.add_load(function () {
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PageLoaded);
  });
  
  function PageLoaded(sender, args) {
      $(".chosen-select").chosen('destroy').chosen();
  }
  

• 确认控件在UpdatePanel内：如果下拉控件不在UpdatePanel中，endRequest事件不会触发，需确保控件处于局部刷新容器内，或改用全局页面加载事件。

完整可用代码示例 #

<script src="jquery.min.js"></script>
<script src="chosen.jquery.min.js"></script>
<link rel="stylesheet" href="chosen.min.css">

<script type="text/javascript">
    Sys.Application.add_load(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(PageLoaded);
        // 初始页面加载时也要初始化一次
        PageLoaded();
    });

    function PageLoaded(sender, args) {
        // 销毁旧实例并重新初始化所有带chosen-select类的控件
        $(".chosen-select").chosen('destroy').chosen({
            width: "100%" // 可根据需求添加Chosen配置参数
        });
    }
</script>

内容的提问来源于stack exchange，提问作者jconde