JQueryUI的dialog弹窗缓存问题

最新推荐文章于 2025-07-20 23:25:32 发布

原创最新推荐文章于 2025-07-20 23:25:32 发布 · 4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

jqueryUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个关于弹窗缓存的问题及解决方案。问题出现在使用jQuery UI生成的弹窗在关闭后重新打开时无法更新input框值的情况。解决方法是在弹窗关闭时销毁缓存并隐藏相关div。

今天遇到一个问题，当进入弹窗页面打开弹窗，并以$("ID")获取弹窗中input的value时，第一次进入此弹窗页面没问题，如果关闭弹窗，返回上一个页面，然后再进入此弹窗页面，点击弹窗，现在修改input框文字，此时获取不到修改后的文字。

原因在于第一次进入弹窗页时的弹窗没有清除缓存，只是表面看不到，但是JQueryUI生成的弹窗div还在页面中，可以在浏览器查看HTML看到。

解决办法：close时销毁此生成的弹窗div缓存，并将本页面关于弹窗使用的div隐藏起来。

代码：

<div id="fund-dialog" class="hide">
</div>

    $("#FUND_CODE").click(function(){
      var dialog = $("#fund-dialog").removeClass('hide').dialog({
        modal : true,
        width : 800,
        title : "<div class='widget-header widget-header-small'><h4 class='smaller'>搜索产品</h4></div>",
        title_html : true,
        buttons : [
            {
              text : "取消",
              "class" : "btn btn-minier",
              click : function(){
                $(this).dialog("close");
              }
            }, {
              text : "确定",
              "class" : "btn btn-primary btn-minier",
              click : function(){
                $(this).dialog("close"); 
              }
            }
        ],close:function(){	//============也就是这里了，在close时将id为fund-dialog的div隐藏，并清除jquery生成的div===        
		$('#fund-dialog').addClass("hide").dialog('destroy');
        }
      })
    })