jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:

listview:               添加 jq(".detail").listview("refresh");
div或其他:         添加.trigger( "create" );

======================================================================

jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等。在页面初始化结束后,如果动态的插入一个元素,往往显示很丑陋,因为没有插入jqm的样式。这个可以用浏览器里的开发工具来查看,会发现有些元素多了很多类,而动态插入的元素代码还是你写的那样子。

如果要使动态插入的元素具有jqm的样式,可以对jqm对象触发create事件:

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选项进行配置

  1. $(document).bind('mobileinit',function(){
  2. $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
  3. });

参考文献

http://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism

http://jquerymobiledictionary.pl/faq.html

http://stackoverflow.com/questions/5651776/jquery-mobile-rendering-problems-with-content-being-added-after-the-page-is-init

http://jquerymobile.com/demos/1.0a4.1/docs/forms/docs-forms.html

http://stackoverflow.com/questions/10235826/jquerymobile-dynamic-css-not-rendering

jquerymobile动态添加元素之后不能正确渲染解决方法的更多相关文章

  1. jquerymobile动态添加元素之后

      jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:listview: 添加 jq(".detail").listview("refresh&quo ...

  2. jqueryMobile 动态添加元素,展示刷新视图方法

    jqueryMobile动态添加元素jqueryMobile郏高阳 jQuery Mobile的是一个很好的移动开发框架,你可能已经知道,虽然它有很多难以解决的问题,但是我相信后续版本jquery会修 ...

  3. EF Power Tools参数不正确的解决方法

    在Visual Studio 2010安装了EF Power Tools Beta 3之后,希望根据本地现有数据库模型来生成基于Entity Framework Code First的代码时,经常出现 ...

  4. macOS 中使用 phpize 动态添加 PHP 扩展的错误解决方法

    使用 phpize 动态添加 PHP 扩展是开发中经常需要做的事情,但是在 macOS 中,首次使用该功能必然会碰到一些错误,本文列出了这些错误的解决方法. 问题一: 执行 phpize 报错如下: ...

  5. Android ListView在增加HeaderView之后使用getLocationInWindow和getLocationOnScreen获得值不正确的解决方法

    近日遇到一个很恶心的问题,把解决方法放到空间里来分享给大家: 问题发生的条件: 1)ListView 控件中使用addHeaderView,为其添加了一个header view.(基本常识:heade ...

  6. WIN7下vs2010滑轮滚动不正确的解决方法

    win7下vs2010在滚动滑轮时文档滚动条不滚动而是解决方案的滚动条滚动的解决方法, 控制面板>设备和打印机>鼠标设置>滚轮选项卡里面将滚轮功能设置设为只使用office97预设的 ...

  7. Windows 10 访问网络共享 总是提示用户名或密码不正确的解决方法

    今天同事在Windows10上共享了一些文件,其他使用Windows 7的同事都可以正常使用,唯独我是使用Windows 10操作系统的,和别人输入一样的用户名和密码,却总是告诉我:用户名或密码不正确 ...

  8. Failed to apply plugin [id 'com.android.application'] 和 Could not find com.android.tools.build:gradle:2.XX的最正确的解决方法

    发现android studio是真的可爱啊,上一秒还没问题可以build运行,下一秒就出错...好,你任性,你牛逼.. 说下今天又遇到的两个问题:Failed to apply plugin [id ...

  9. vue v-for的数组改变导致页面不渲染解决方法

    直接在数组里,改变数组来达到重新渲染页面的目的, 需要用push等数组方法, 或者$set(),或者给数组重新赋值,来改变数组引用地址 而是直接索引= <body> <div id= ...

随机推荐

  1. Windows Phone 执行模型概述

    Windows Phone 执行模型控制在 Windows Phone 上运行的应用程序的生命周期,该过程从启动应用程序开始,直至应用程序终止. 该执行模型旨在始终为最终用户提供快速响应的体验.为此, ...

  2. JVM的堆分配

    为了展示虚拟机如何使用方法区中的信息,下面来举例说明:   class Lava { private int speed = 5; void flow(){ } }     public class ...

  3. Xamarin Anroid App访问网站失败

    Xamarin Anroid App访问网站失败 错误信息:net::ERR_NAME_NOT_RESOLVED如果电脑同时有有线网卡和无线网卡,电脑使用无线网卡上网,而有线网卡不上网.这时,就会出现 ...

  4. 核反应堆[HDU2085]

    核反应堆 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. BZOJ3560 : DZY Loves Math V

    因为欧拉函数是非完全积性函数,所以可以考虑对每个数进行分解质因数,将每个质数的解乘起来即可. 对于一个质数$p$,设它在各个数中分别出现了$b_1,b_2,...b_n$次,那么由生成函数和欧拉函数的 ...

  6. js中等性操作符(==)、关系操作符(<,>)和布尔操作符(!)比较规则

    最近一直在笔试面试,经常碰到例如 123=='123'.'abc'==true等问题,其中有答对的,也有答错的,主要原因还是对ECMAScript的规范没有理解清楚,很多题目没有具体分析所导致.现查阅 ...

  7. C#引用Interop.SQLDMO.dll后的注意事项(转)

    C#引用sqldmo.dll的方法 找到 sqldmo.dll这个文件C:\Program Files\Microsoft SQL Server\80\Tools\Binn\sqldmo.dll用.N ...

  8. 微信企业号办公系统-JSSDK上传图片(多图上传)

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  9. jquery判断是否出现滚动条

    $(document).ready(function(){ var winH = $(window).height(); //页面可视区域高度 $(window).scroll(function () ...

  10. 如何设置jquery的ajax方法为同步

    jax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({  url: "some.php",  async: ...