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高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
vue 实现购物车总价计算
Nov 06 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vite + React从零开始搭建一个开源组件库
Jun 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php简单图像创建入门实例
2015/06/10 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
python封装对象实现时间效果
2020/04/23 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python笔试面试题小结
2019/09/07 Python
python如何从文件读取数据及解析
2019/09/19 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python常用库大全及简要说明
2020/01/17 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
鲜果饮品店创业计划书
2014/01/21 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
教师节感谢信
2015/01/22 职场文书
绵山导游词
2015/02/05 职场文书
计划生育责任书
2015/05/09 职场文书
2015中秋祝酒词
2015/08/12 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Redis Cluster 集群搭建你会吗
2021/08/04 Redis