easy ui dialog 关闭之后的怪异问题

最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师!

事故现场:

增加页面和修改页面是分离的两个jsp文件.

在页面加载时会用jquery去控制一些数据加载和一些逻辑.理论上来说不希望增加页面和修改页面

互相干扰.

单独拿增加模块测是正常的.加载修改页面后再使用增加页面就会发现增加页面功能不正常.

之后通过浏览器检查发现使用jquery通过类选择器选中的dom对象的确是不正常的.经排查发现增加

页面和修改页面是用到相同的class,而用jquery获取对象时正是用此class获取,以致增加页面功能不

能正常使用.

处理方案:

修改其中一个页面与另外一个页面相同的类名以作区分,以防在增加页面js选择dom对象时获取到修改页面.

根本原因:

easy ui dialog 是通过主页面上的div 对象加载子页面实现的.在dialog加载时会把子页面dom对象加载到主页面上,dialog关闭时实际上是把div隐藏,而不是销毁dom对象,以致在关闭dialog后在主页面依然能获取到子页面上我们不希望出现的dom对象.也就是说在加载修改dialog之后我们在增加页面上依然可以获取到修改页面上的资源,同样,在加载增加dialog后在修改页面上也可以获取增加页面的资源,这只是一个加载顺序的问题.所以出现了一些不可思议的现象.以此谨记.

时间: 2024-10-12 09:23:21

easy ui dialog 关闭之后的怪异问题的相关文章

7个jquery easy ui 基本组件图解

以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href=".

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

Jquery Easy UI初步学习(一)

Easy UI 1.3.2 以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧 先从后台管理的主页面开始,如要要做主页需要了解以下几项 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如: <div class="easyui-dialog" style="width:400px;

Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)

前言 很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中. 引入.封装和调用 首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easy

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

jquery easy UI 的hello版

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tree Node Icons - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="easyui.css"> <link r

jQuery Easy UI Panel(面板)组件

panel(面板)组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <s

jQuery Easy UI的使用

一.初步认识 1.什么是jQuery Easy UI jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面. 官方网站http://www.jeasyui.com 2.jQuery EasyUI有哪些特点 (1).基于 jquery 用户界面插件的集合: (2).源代码加密.商业版付费 (3).使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTM