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. su和su - 的区别

    Linux中切换用户的命令是su或su -.前天我在使用useradd这个命令时,才体会到这两者的本质区别.如图: 我首先是用su命令切换到root身份的,但是运行useradd时,出现错误:bash ...

  2. 简单几何(线段相交) POJ 1410 Intersection

    题目传送门 题意:一个矩形和一条线段,问是否有相交 分析:考虑各种情况.坑点:给出的矩形的两个端点是无序的,还有线段完全在矩形内也算相交 /****************************** ...

  3. VC创建预编译文件

    Building a simple "hello world" Ogre application can take several seconds on a modern mach ...

  4. topcoder SRM 592 DIV2 LittleElephantAndBooks

    #include <iostream> #include <vector> #include <algorithm> using namespace std; cl ...

  5. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  6. Sublime Text 2配置

    gedit用了很久,终于换编辑器了T_T Sublime Text 自行百度谷歌. 一开始我在官网下载的压缩包,然后自己配置.搞了半天后果断删掉...还是用源的自动安装吧.T_T 恩.下面的命令 su ...

  7. [BZOJ 2631]tree

    裸LCT..QAQ写了三遍没写对 真是老了..QAQ 主要错的地方是 init: size[i] = sum[i] = val[i] = mul[i] = 1; pushdown: 注意判断左右儿子是 ...

  8. C#设计模式——抽象工厂模式(原文转自:http://blog.jobbole.com/78059/)

    一.引言 在上一专题中介绍了工厂方法模式,工厂方法模式是为了克服简单工厂模式的缺点而设计出来的,简单工厂模式的工厂类随着产品类的增加需要增加额外的代码),而工厂方法模式每个具体工厂类只完成单个实例的创 ...

  9. audio.js – 随时随地,播放 HTML5 的声音

    audio.js是一个HTML5标签的简易包装.但它不仅在支持HTML5的浏览器上能够轻松调用标签,并在不支持HTML5的浏览器上也能通过Flash作为B计划使用.除此之外,audio.js所提供的界 ...

  10. Network | TCP congestion control

    拥塞控制算法:1. 加性增.乘性减:2. 慢启动:3. 对超时事件作出反应: 整体过程如下: 慢启动->到达阈值->加性增(窗口+1个MSS), 这个阶段叫拥塞避免(CA)->3个冗 ...