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返回前一页刷新本页重载页面
Jul 29 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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 whois查询API制作方法
2011/06/23 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
YII框架关联查询操作示例
2019/04/29 PHP
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
用Python编写web API的教程
2015/04/30 Python
详解python进行mp3格式判断
2016/12/23 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
项目委托协议书(最新)
2014/09/13 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
单位租房协议书范本
2014/12/04 职场文书
团委副书记工作总结
2015/08/14 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL