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中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 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判断网页是否gzip压缩
2013/06/25 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
Javascript中replace()小结
2015/09/30 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
详解微信UnionID作用
2019/05/15 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
python实现关键词提取的示例讲解
2018/04/28 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python hashlib模块实例使用详解
2019/12/24 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
母校寄语大全
2014/04/10 职场文书
加入学生会演讲稿
2014/04/24 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
雷锋观后感
2015/06/10 职场文书
SQL Server中锁的用法
2022/05/20 SQL Server
MySQL transaction事务安全示例讲解
2022/06/21 MySQL