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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
vue 注册组件的使用详解
May 05 Javascript
vue+axios实现post文件下载
Sep 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python实现下载整个ftp目录的方法
2017/01/17 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python控制Firefox方法总结
2019/06/03 Python
Python logging设置和logger解析
2019/08/28 Python
python构造函数init实例方法解析
2020/01/19 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
授权委托书怎么写
2014/04/03 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
项目建议书怎么写
2014/05/15 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
个人债务授权委托书
2014/10/17 职场文书
教师岗位职责
2015/02/03 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js