- 浏览: 729315 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (663)
- Eclipse&MyEclipse (40)
- PHP (3)
- Java (72)
- CSS (3)
- MySQL (35)
- Oracle (68)
- Red Hat Linux (23)
- Tomcat (26)
- Oracle10gAS (1)
- Spring (28)
- MyBatis&iBatis (13)
- JS (47)
- JQuery (23)
- Editplus (2)
- 其他 (4)
- Html (15)
- SQL (5)
- Ant (2)
- Hadoop (2)
- Servlet (9)
- Windows (11)
- Flex (1)
- CentOS Linux (7)
- Microsoft SQL Server (2)
- DB2 (3)
- Mysql char 与 varchar 区别 (0)
- excel (5)
- jsp (8)
- FreeMarker (1)
- EasyUI (5)
- WebShpere MQ (1)
- Maven2 (6)
- 浏览器缓存 (2)
- visio (1)
- XML (2)
- 物联网 (1)
- Maven (3)
- JSTL (2)
- HTTP (1)
- Fourinone (1)
- IP知识 (1)
- MyBatis (1)
- 项目管理 (2)
- office2003+2007 (1)
- DOS (1)
- JProfiler (1)
- Thinpad T440p (1)
- ActiveMQ (10)
- MongoDB (5)
- Vert.x3 (1)
- Ngnix (3)
- Spark (2)
- BigData (1)
- 性能概念公式 (1)
- RocketMQ (3)
- IT名词术语 (1)
- Java编程工具 (1)
- RabbitMQ (2)
- MetaMQ (1)
- 架构 (6)
- KafkaMQ (7)
- Redis (4)
- OAuth (1)
- Gradle (1)
- CentOS (5)
- Microsoft_Toolkit (1)
- git (5)
- IntelliJ Idea (4)
- Nginx (3)
- docker (12)
- VMware (2)
- 算法 (1)
- JDBCPool (1)
- spring-cloud (7)
- netbean (1)
- 微信小程序 (2)
- CURL (2)
- Java生成二维码 (1)
- 区块链 (2)
- 机器学习 (1)
- SpringBoot (3)
- Android (9)
- 微服务架构 (1)
- Kubernetes (2)
- OpenProject (0)
- 测试 (1)
- https (1)
- 开源许可证 (1)
- ServiceMesh (2)
- NET (0)
- .NET (1)
- TEST (1)
- iOS (2)
- thymeleaf (4)
- lombok (1)
- 浏览器设置 (1)
- 富文本编辑器 (1)
- 搜索引擎 (1)
- IT常识 (1)
- UML (0)
- Axure (1)
- appstore无法联网 (0)
- apk无法安装 (1)
- SQLServer (2)
- 卸载弹窗软件 (1)
- jenkins (1)
- TortoiseGit (1)
- eureka (1)
- ajax (1)
- spyder (0)
最新评论
使用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的内核的方法可以参考。
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的内核的方法可以参考。
发表评论
-
Nginx通过CORS实现跨域(转)
2018-03-15 15:29 1145什么是CORS CORS是一个W3 ... -
require.js的用法(转)
2015-11-17 15:44 562一、为什么要用require.js? 最早的时候,所有Ja ... -
[JS]jQuery中attr和prop方法的区别
2015-11-12 14:17 689原作者:http://blog.csdn.net/szwan ... -
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})()
2015-11-12 14:03 614原作者:http://blog.csdn.net/szwan ... -
$.extend(true,{},a,b),深入理解,小心陷阱(转)
2015-11-12 13:53 1094$.extend一般情景下,使 ... -
Jquery单选框、复选框 根据name取值 (转)
2014-06-14 11:56 6551、单选框:jQuery("input[name= ... -
jquery遍历json数组方法
2014-06-08 15:01 733$(function () { ... -
jQuery插件的开发(转)
2014-04-17 12:40 330jQuery插件的开发包括两种: 一种是类级别的插件开发 ... -
$(this) 与 this 区别 (转)
2014-04-16 09:06 582如果你要使用html元素本身的属性或方法就需要使用this ... -
在Web下输入密码时提示大写锁定键(转)
2013-10-23 17:06 1074作者:http://www.cnblogs.com/mrhg ... -
10 个很棒的 jQuery 代码片段(转)
2013-07-05 17:41 754图片预加载 (function($) { ... -
应用jQuery实现表格数据的动态添加与统计(转)
2013-07-04 17:52 1146应用jQuery实现表格数据的动态添加与统计 图(1 ... -
jQuery 操作 下拉框 文本框(转)
2013-06-25 18:33 986jquery操作下拉框 jQuery获取Select选 ... -
jquery.uploadify插件实现图片上传和预览效果 (转)
2013-05-06 12:34 17331、js代码: <script ty ... -
SCRIPT1028: 缺少标识符、字符串或数字(转)
2013-04-23 10:41 1984http://www.cnblogs.com/qiu ... -
jqgrid多行添加保存,jqgrid多行删除
2013-03-28 14:33 2233//保存添加行的id编号var newrowids = ne ... -
jquery遍历筛选数组的几种方法和遍历解析json对象 (转)
2013-03-21 12:42 696jquery遍历筛选数组的几种方法和遍历解析json对象 ... -
jQuery 增加 删除 修改select option (转)
2013-03-19 17:08 1280jQuery获取Select选择的Text和Value: ... -
jQuery jqGrid inline edit 回车之后新增问题
2013-03-19 12:33 874主键字段 也要添加 editable:true, 否则会在回车 ... -
JQuery validate 日期比较
2013-03-11 12:23 10521. $(function() { jQuery.vali ...
相关推荐
仿 JQuery Dialog 登录页面 htm css div 简洁
简单的jquery dialog实现插件,使用简单,自行修改样式
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
jQuery Dialog jQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery Dialog
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
JQuery UI Dialog 弹出框以及清楚数据
一款不错的jQueryDialog 插件使用范例,有需要的请查看
jqueryAlert confirm prompt 将jqueryDialog改成prompt形式
Jquery中dialog属性的小计,详细介绍dialog的使用
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
18、jQuery弹出对话框jQuery插件Dialog
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
全面的jquery dialog 细节 包括参数 包 css 等等
虽然项目未结项就转交了出去,但开始对JQuery产生了好感并爱不释手,于是决定将此项目正式更名为JQueryDialog。 本次更新将代码完全基于了JQuery框架,并应用了命名空间,让JS看起来有那么一点OO的感觉,同时修改了...
jquery dialog css3弹出对话框插件实例 jquery dialog css3弹出对话框插件实例
jQuery插件 dialog非常不错的弹出框控件
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
JQuery Alert Dialog,包括錯誤,警告,提示信息圖標
jquery Dialog 弹出框 上一个项目就是用的这个 很漂亮很实用