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

最新推荐文章于 2023-02-05 18:28:13 发布

原创最新推荐文章于 2023-02-05 18:28:13 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #python #ui #ViewUI

jquery mobile 专栏收录该内容

10 篇文章

订阅专栏

针对JqueryMobile在动态添加元素后出现的CSS丢失问题，本文介绍了两种解决方案：一是模仿JqueryMobile处理后的样式手动添加元素；二是利用JqueryMobile内置的refresh方法刷新新增元素，后者更为简便有效。

在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 += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" + CountSize($obj[i].wsize) + "<a href='dialog/operatefile.html' >操作</a></li>";

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

onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" + CountSize($obj[i].wsize) + "<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 += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" +

"" + CountSize($obj[i].wsize) + "" +

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

"" +

"" +

"" +

"" +

"" +

"" +

"" +

"" +

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

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

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

"" + CountSize($obj[i].wsize) + "" +

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

"" +

"" +

"" +

"" +

"" +

"" +

"" +

"" +

"</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 += "onclick=\"GetShowMyList(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" + CountSize($obj[i].wsize) + "<a href='dialog/operatefile.html' >操作</a></li>";

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

onelist += "onclick=\"download(\'" + $obj[i].wid + "\')\">" + $obj[i].wname +"</a>" + CountSize($obj[i].wsize) + "<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