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 showModalDialog模态对话框使用说明
Dec 31 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
深入理解Node module模块
Mar 26 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP取进制余数函数代码
2012/01/19 PHP
简单谈谈favicon
2015/06/10 PHP
隐性调用php程序的方法
2015/06/13 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Yii清理缓存的方法
2016/01/06 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
jquery获取节点名称
2015/04/26 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
校园歌咏比赛主持词
2014/03/18 职场文书
情况说明书格式范文
2014/05/06 职场文书
园林技术专业求职信
2014/07/28 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
夫妻吵架保证书
2015/05/08 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL