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调试说明
Jun 07 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
svg动画之动态描边效果
Feb 22 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
详解Angular2 关于*ngFor 嵌套循环
May 22 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 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 批量删除数据的方法分析
2009/10/30 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
详解php命令注入攻击
2019/04/06 PHP
为数据添加append,remove功能
2006/10/03 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python对象及面向对象技术详解
2016/07/19 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python之拟合的实现
2019/07/19 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
慰问信格式规范
2015/03/23 职场文书
对学校的意见和建议
2015/06/04 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Python基础之变量的相关知识总结
2021/06/23 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android