`
frank1998819
  • 浏览: 758503 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

Jquery dialog( 'destroy' ) 后还有缓存 (转)

 
阅读更多
使用jQuery的Dialog控件时,jQuery会将创建的dialog缓存到页面上,生成一些隐藏的div,当再次创建dialog时,由于id相同总会调用缓存中的Dialog,导致无法显示想要显示的内容。查了dialog有destroy方法,依然没有作用。

baidu一下恍然,destroy销毁的jquery ui给你生成dialog时候的那些html,不会销毁元素本身,要销毁元素本身要用remove
<script>
        function Test()
        {
            var $dialog = $('<div></div>').dialog({
                autoOpen: true,
                title: '测试内容',
                buttons: {
                    "关闭": function () { $(this).dialog('close');},
                    "确定": function () { }
                },
                close: function () { $(this).remove(); },
                open: function ()
                {
                    $(this).html('加载你的页面');
                }
            });
        }
    </script>
补充:上面的方法可以把Dialog彻底清除,但连同Dialog中的DIV也同时清除了,在应用中通常是自建一个Div,通过Div的id绑定Dialog,而jquery会把这个自建的div清除,内容全部放到Dialog的Div中,Dialog的Div默认是建在body中,这对于使用ajax重写页面代码的应用产生了很多冲突,如果使用上面的方法你的Dialog将只能弹出一次,关闭的时候就会被remove。查了一下替代的解决方法,可以将自建的div先clone,在close时将克隆的div重新append到页面上。
<script>
    function Test(divId)
    {
    var dialogParent = $(divId).parent();
    var dialogOwn = $(divId).clone();
    dialogOwn.hide();

        var $dialog = $(divId).dialog({
            autoOpen: true,
            title: '测试内容',
            buttons: {
                "关闭": function () { $(this).dialog('close');},
                "确定": function () { }
            },
            close: function () {
            dialogOwn.appendTo(dialogParent);
            $(this).dialog("destroy").remove();
            },
            open: function ()
            {
                $(this).html('加载你的页面');
            }
        });
    }
</script>

这是在jquery1.8中发现的问题,在其他版本中是否还有尚未测试。


以上是我的解决方法,参考自http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body


实现方式还可以优化,而且网上还有一些直接改了dialog的内核的方法可以参考。



分享到:
评论

相关推荐

    jquery_dialog jquery_dialog jquery_dialog

    《jQuery Dialog 深度解析与实践应用》 在Web开发领域,jQuery Dialog是一款非常流行的JavaScript库,用于创建可交互的对话框。它基于jQuery框架,提供了丰富的功能和灵活的定制选项,使得开发者能够轻松地在网页上...

    仿 JQuery Dialog 简洁登录页面

    【标题】"仿 JQuery Dialog 简洁登录页面"是一个基于JQuery Dialog组件设计的简单登录界面,旨在提供用户友好的交互体验。JQuery Dialog是jQuery UI库中的一个功能,它允许开发者创建可自定义的弹出对话框,用于显示...

    jquery dialog简单实现插件

    jQuery Dialog 是一个非常流行的JavaScript库,它为网页提供了一种优雅的方式来创建弹出式对话框。这个插件是基于jQuery框架构建的,主要用于创建模态或非模态的窗口,通常用于显示警告、确认信息或者作为用户交互的...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    **jQuery Dialog弹出层对话框插件:深入解析与应用** jQuery Dialog是jQuery UI库中的一个组件,它提供了一种优雅的方式在网页上创建交互式的弹出层对话框。这个插件不仅允许用户展示信息,还可以加载外部URL内容,...

    jQuery dialog对话框插件点击弹出对话框代码

    jQuery dialog对话框插件是jQuery UI库中的一个核心组件,用于创建可自定义的模态或非模态对话框。这个插件提供了丰富的功能,包括拖动、调整大小、自动定位以及多种主题样式,使开发者能够轻松地在网页中添加交互式...

    jQueryDialog 插件使用范例

    jQueryDialog是一款广泛应用于网页中的对话框插件,它基于JavaScript库jQuery构建,为开发者提供了创建弹出式对话框的功能,可以用于显示警告、确认、信息或其他复杂内容。在这个使用范例中,我们可以看到几个关键...

    JQuery Dialog

    - **操作 Dialog**:除了初始化,还可以通过`.dialog('open')`、`.dialog('close')`、`.dialog('destroy')`等方法来动态控制Dialog的状态。 ### 6. 使用数据API - **数据属性**:jQuery UI允许在HTML元素上直接...

    JQuery dialog

    - **方法**:除了 `open` 和 `close`,还有 `destroy` 用于彻底移除 Dialog,以及 `option` 更新选项值。 6. **应用示例** - **警告提示**:在用户进行危险操作前显示警告信息,要求确认。 - **表单提交**:弹出...

    jquery dialog弹出层

    而jQuery UI则是在jQuery基础上扩展的一套交互式用户界面组件库,其中包括一个强大的对话框(Dialog)功能,即“jQuery dialog弹出层”。这个弹出层在网页应用中广泛用于创建模态或非模态警告、提示、确认或者更复杂...

    jquery ui Dialog 添加最大最小化按钮控制

    在IT领域,jQuery UI是一个非常流行的前端开发库,它提供了许多可交互的用户界面组件,如Dialog(对话框)就是其中之一。"jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能,使其...

    jQuery Dialog

    jQuery Dialog jQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery Dialog

    jqueryDialog

    在IT领域,jQuery Dialog是一种广泛使用的插件,它允许开发者创建弹出对话框,用于提示、警告、确认或提供交互式表单等。这个特定的知识点聚焦于如何将原本的jQuery Dialog功能转换成类似JavaScript内置的`alert`、`...

    jquery dialog 用法

    解压后,你可以参考这些文件来学习和实践jQuery Dialog的各种用法和样式。 总结来说,jQuery Dialog是一个强大且灵活的组件,通过设置各种参数和事件回调,可以满足不同场景的需求。结合适当的CSS样式,你可以创建...

    jQuery对话框Dialog弹出层插件演示与使用说明

    jQuery Dialog 是一个强大的弹出层插件,常用于创建各种对话框、提示窗口或模态框,极大地丰富了网页的交互体验。这个插件是基于 jQuery 库构建的,因此在使用前确保已经引入了 jQuery。下面将详细介绍如何使用 ...

    18、jQuery弹出对话框jQuery插件Dialog

    jQuery Dialog是jQuery UI库中的一个核心组件,它提供了一种优雅的方式来实现弹出对话框功能。这个插件允许开发者创建可自定义的模态或非模态窗口,用于显示警告、确认信息、输入数据或者展示丰富的内容。在网页交互...

    jQuery通用dialog对话框 popup提示信息窗口插件demo

    **jQuery通用Dialog对话框与Popup提示信息窗口插件** 在前端开发中,用户交互界面的友好性和用户体验至关重要。jQuery提供了一种便捷的方式来实现这一目标,那就是通过Dialog对话框和Popup提示信息窗口。本文将深入...

    jQuery.dialog.js网页弹出对话框美化特效插件

    《jQuery.dialog.js:网页弹出对话框的美化与特效实现》 在网页设计中,对话框(dialog)是一种常见的交互元素,用于展示重要的信息或进行用户操作确认。jQuery.dialog.js是一个专为网页开发者设计的轻量级插件,...

    jquery Dialog 弹出框 很漂亮 实用

    jQuery Dialog 是一个功能强大的弹出框插件,它是 jQuery UI 库的一部分,广泛应用于网页交互设计中,提供美观且可自定义的对话框效果。在实际项目中,它以其高效和易用性受到开发者的喜爱。 Dialog 弹出框的核心...

    jquery-dialog demo

    **jQuery Dialog 框简介** jQuery Dialog 是一个强大的弹出窗口组件,它是 jQuery UI 库的一部分,用于在网页上创建可交互的对话框。这个组件提供了丰富的功能,如可定制的样式、拖动、调整大小、自动定位以及多种...

    Jquery中dialog属性

    Jquery中dialog属性的小计,详细介绍dialog的使用

Global site tag (gtag.js) - Google Analytics