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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
简单的JS轮播图代码
Jul 18 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Python笔记之代理模式
2019/11/20 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
财务简历的自我评价
2014/03/05 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
社区文明倡议书
2015/04/28 职场文书
幽灵公主观后感
2015/06/09 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android