jquery mobile动态添加元素之后不能正确渲染解决方法说明


Posted in Javascript onMarch 05, 2014

jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:
listview: 添加 jq(".detail").listview("refresh");
div或其他:添加.trigger( "create" );
======================================================================

jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等。在页面初始化结束后,如果动态的插入一个元素,往往显示很丑陋,因为没有插入jqm的样式。这个可以用浏览器里的开发工具来查看,会发现有些元素多了很多类,而动态插入的元素代码还是你写的那样子。

如果要使动态插入的元素具有jqm的样式,可以对jqm对象触发create事件:

<span style="font-size:18px;"> $(selector).trigger('create');</span> 

create事件适用范围广,甚至可以是 不存在的元素(raw markup?),比如要插入一个按钮
$('<a data-role="button">dy button</a>').appendTo('#content').trigger('create');

有些对象提供了refresh 方法,如listview、flip toggle。与create的区别是refresh方法需要作用在已存在的对象上,如

$('ul').listview('refresh'),而且refresh只会去更新新加入的元素,如listview里最新append的元素会更新,原有的保持不变。(不知有没理解错,有些没测试。原文http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

不使用jqm样式:

如果不希望jqm自动初始化你的元素,有两种方法。加入data-role="none"属性,或者在mobileinit事件中对keepNative选项进行配置

$(document).bind('mobileinit',function(){
 $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
Javascript 相关文章推荐
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
node跨域请求方法小结
Aug 25 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 #Javascript
js判断ie版本号的简单实现代码
Mar 05 #Javascript
浅析tr的隐藏和显示问题
Mar 05 #Javascript
jQuery性能优化的38个建议
Mar 04 #Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 #Javascript
js调用iframe实现打印页面内容的方法
Mar 04 #Javascript
JavaScript的21条基本知识点
Mar 04 #Javascript
You might like
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python的类方法和静态方法
2014/12/13 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python装饰器用法示例小结
2018/02/11 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python+logging+yaml实现日志分割
2019/07/22 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
求职简历自荐信
2013/10/20 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
我未来的职业规划范文
2014/01/11 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
促销活动计划书
2014/05/02 职场文书
大气污染防治方案
2014/05/19 职场文书
会议邀请函
2015/01/30 职场文书
商务邀请函
2015/01/30 职场文书
资料员岗位职责
2015/02/10 职场文书