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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
jQuery 改变CSS样式基础代码
Feb 11 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
ReactRouter的实现方法
Jan 25 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中创建图像并绘制文字的例子
2014/11/19 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
Django实现文件上传下载功能
2019/10/06 Python
python  logging日志打印过程解析
2019/10/22 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Python中过滤字符串列表的方法
2020/12/22 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
信息管理专业推荐信
2013/10/29 职场文书
项目投资建议书
2014/05/16 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android