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 相关文章推荐
jQuery函数的等价原生函数代码示例
May 27 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
资料注册后发信小技巧
2006/10/09 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js中生成map对象的方法
2014/01/09 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
原生js实现验证码功能
2017/03/16 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
javascript中call()、apply()的区别
2019/03/21 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python实现移位加密和解密
2019/03/22 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
庆元旦广播稿
2014/02/10 职场文书
简单租房协议书范本
2014/08/20 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
自书遗嘱范文
2015/08/07 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis