动态添加元素css丢失的终极解决办法

在Jquerymoblie的使用过程中,动态添加元素后css丢失。

这个问题在之前JqueryMobile使用心得(3)中我已经说明了其原因(因为页面标签首先经过jquery.mobile-1.0a2.min.js的处理,添加了许多标签,然后再用css布局),并且给出了一种解决方法:动态加载jquery.mobile-1.0a2.min.js。

但是经过测试,上面这种方法并不好。首先异步加载造成用户可以看到没有加载JS的页面,并且JS加载过一次后,如果再要动态添加新元素的话,就意味着多次加载JS文件,显示问题先不说,这效率也堪忧。

因此必须提出新方法。

新方法有两个,调用JS的顺序与普通方式相同,都别动态添加JS。

一是将按照jquery.mobile-1.0a2.min.js处理过后的样式,来动态添加元素。jquery.mobile-1.0a2.min.js处理过后的样式可以通过chrome浏览器的审查元素功能看到。这个办法的缺点很明显:添加了很多奇怪的标签。

例如:

一般情形下动态添加元素:

onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "οnclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}else{//非文件夹直接下载

onelist += "οnclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";



按照jquery.mobile-1.0a2.min.js处理过后的样式,来动态添加元素:



onelist = "<li class='ui-li-has-icon ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-c' role='option' tabindex='0' data-theme='c'>" +

"<div class='ui-btn-inner'>" +

"<div class='ui-btn-text'>" +

"<img class='ui-li-icon ui-li-thumb' src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' />" +

"<a class='ui-link-inherit' href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "οnclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +

"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +

"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +

"<span class='ui-btn-inner'>" +

"<span class='ui-btn-text'></span>" +

"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +

"<span class='ui-btn-inner ui-btn-corner-all'>" +

"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +

"</span>" +

"</span>" +

"</span>" +

"</a></div></div></li>";

}else{//非文件夹直接下载

onelist += "οnclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +

"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + CountSize($obj[i].wsize) + "</span>" +

"<a class='ui-li-link-alt ui-btn ui-btn-up-c' href='dialog/operatefile.html' title='操作' data-theme='c'>" +

"<span class='ui-btn-inner'>" +

"<span class='ui-btn-text'></span>" +

"<span class='ui-btn ui-btn-up-d ui-btn-icon-notext ui-btn-corner-all ui-shadow' data-theme='d'>" +

"<span class='ui-btn-inner ui-btn-corner-all'>" +

"<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>" +

"</span>" +

"</span>" +

"</span>" +

"</a></div></div></li>";

}

}



瞧这多了多少代码啊!不过这也是JueryMobile UI前端实际最终处理的代码量。

方法二:refresh

其实JueryMobile 中早就封装了refresh方法。你只需要对新添加的元素节点refresh一下就可以了。

例如: $("#节点名").listview("refresh");

还是刚才那个函数,采用普通的动态添加元素方法,最后加个refresh就搞定了。



function ShowMyListOK(){//处理根目录文件列表函数

if( $glb_result == ""){

alert("返回为空!请重新登录!");

}else{

//alert("成功: "+$glb_result);

$("#wlist").empty();

var $obj = jQuery.parseJSON($glb_result);

var onelist = "";

$.each( $obj, function(i, n){

if( $obj[i].wname != ""){

onelist = "<li><img src='stylesheets/images/file_icon/" + SwitchIcon($obj[i].wext) + "' class='ui-li-icon'/><a href='#' ";

if($obj[i].wtype == "dir"){//文件夹

onelist += "οnclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}else{//非文件夹直接下载

onelist += "οnclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a><span class='ui-li-count'>" + CountSize($obj[i].wsize) + "</span><a href='dialog/operatefile.html' >操作</a></li>";

}

$("#wlist").append(onelist);

}

});

$("#wlist").listview("refresh");

}

}



这个方法很好,但是为什么没有早点发现呢?因为jquery.mobile-1.0a2.js的源码确实很不好读。本人JS水平有限,看到里面内容后,以为调用里面方法必须创建对象,误解了JQuery的原意。试了半天才搞出来,必须发帖纪录一下这个小成功。


http://hi.baidu.com/%CE%F7%B1%B1%C5%DD%C3%E6%CD%F5/blog/item/e743654de9424a24afc3ab8b.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用`append()`方法动态添加元素并同时添加CSS样式时,需要注意以下几点: 1. 确保添加的CSS样式的选择器与现有的样式不冲突; 2. 确保CSS样式在元素添加到DOM树之后才定义,否则新添加的元素不会应用这些样式; 3. 如果需要在添加元素后立即应用CSS样式,可以使用`setTimeout()`方法或者异步加载样式表的方式。 下面是一个示例代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; p.style.color = 'red'; // 添加CSS样式 document.getElementById('container').append(p); </script> ``` 在上面的代码中,我们使用`createElement()`方法创建一个新的段落元素,并为其添加了样式`color: red`。由于样式是在元素添加到DOM树之前定义的,因此新添加的元素会应用这些样式。如果需要异步加载样式表,可以使用以下代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; document.getElementById('container').append(p); // 异步加载样式表 var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'path/to/styles.css'; document.head.append(link); </script> ``` 在上面的代码中,我们先添加了一个新的段落元素,然后使用`createElement()`方法创建一个`link`元素,并设置其`rel`属性为`stylesheet`,`href`属性为样式表的路径。最后,将`link`元素添加到`head`元素中,样式表会异步加载并应用到新添加的元素上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值