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拖动技术 关于setCapture使用
Dec 09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
taro开发微信小程序的实践
May 21 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 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
php4的session功能评述(一)
2006/10/09 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
十个Python程序员易犯的错误
2015/12/15 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python装饰器结合递归原理解析
2020/07/02 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
聚会通知怎么写
2015/04/23 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2016年学校招生广告语
2016/01/28 职场文书
以下牛机,你有几个
2022/04/05 无线电