jquery mobile动态添加元素之后不能正确渲染解决方法说明

 本篇文章主要是对jquery mobile动态添加元素之后不能正确渲染解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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";
});
 

时间: 2024-10-24 23:50:55

jquery mobile动态添加元素之后不能正确渲染解决方法说明的相关文章

jquery mobile动态添加元素之后不能正确渲染解决方法说明_jquery

jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:listview: 添加 jq(".detail").listview("refresh");div或其他:添加.trigger( "create" );====================================================================== jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等.在页面初

jQuery Validation动态表单无法提交的解决方法

在使用jQuery Validation Plugin对表单进行验证,如果使用Js动态的往form里添加input或textarea表单项时,发现无法提交表单,新添加的表单项无法通过验证,脚本报错. 使用的表单验证插件版本是:jQuery Validation Plugin 1.11.1. 解决方法是如果表单内容有改变,则重新设置一下验证规则即可.举例如下:  代码如下 复制代码 $("#formid").change(function(){     var $form = $(&qu

jquery 数组 动态添加元素

问题描述 jquery 数组 动态添加元素 grid.set({ columns: [ { type: "indexcolumn" }, { field: "loginname", width: 120, headerAlign: "center", allowSort: true, header: "单位", editor: { type: "textbox", minValue: 0, maxValue

jqueryMobile 动态添加元素,展示刷新视图的实现方法_jquery

jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修复--我是很喜欢jquery的.这并不是说它很完美无暇,很多开发人员遇到的情况也都难解决,比如:尝试使用代码来添加,更新或删除元素,使用JavaScript的页面跳转.在这篇博客文章中,我列出了一些动态添加组建重新刷新的方法. 1.Textarea field $('body').prepend('<textarea id="myTextArea"&

jQuery给动态添加的元素绑定事件的方法

 这篇文章主要介绍了jQuery给动态添加的元素绑定事件的方法,对比了jQuery中事件绑定的方法以及常见版本使用绑定的区别,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给

JQuery Mobile 弹出式登录框的实现方法_jquery

<a href="#login" data-rel="popup" data-position-to="window" data-role="button">Login</a> <div data-role="popup" id="login" data-theme="a"> <form style="padding

jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法_jquery

在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

jQuery:delegate中select()不起作用的解决方法

 本篇文章只要是对jQuery:delegate中select()不起作用的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery有一个很好用的delegate(事件委派)功能,可以给当前以及将来(动态添加)的元素绑定一个事件处理函数.   比如下面的例子,动态添加一个输入文本框后,我想让所有文本框(不管是不是动态添加的)在获取焦点时,自动转大写.   代码如下: <!doctype html> <html> <head>     <

flash as3 中动态加载库类失败解决方法

flash as3 中动态加载库类失败解决方法 这是错误的写法 for (var i:number=1; i<4; i++) { var mc1:mc1 = new mc1(); addchild(mc1); } as3里怎么循环加载库里的mc1 mc2 mc3类 就是下面意思是怎样个的写法 for (var i:number=1; i<4; i++) { var "mc"+i:"mc"+i = new "mc"+i(); addch