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. sample

    sample是在数据源取样. val data = sc.parallelize(1 to 20) data.sample(true,0.4).collect sample第一个参数表示是否是重复抽样 ...

  2. wait、notify、notifyAll和Condition

    wait().notify()和notifyAll()是基于synchronized Condition是基于Lock的. Condition是在java 1.5中才出现的,它用来替代传统的Objec ...

  3. WCF客户端关闭代码

      Close不一定会成功,所以需要Abort. ChannelFactory channel = new ChannelFactory<IService1>("bindingN ...

  4. 【BZOJ】1602: [Usaco2008 Oct]牧场行走(lca)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1602 一开始以为直接暴力最短路,但是n<=1000, q<=1000可能会tle. 显然 ...

  5. BZOJ3925: [Zjoi2015]地震后的幻想乡

    Description 傲娇少女幽香是一个很萌很萌的妹子,而且她非常非常地有爱心,很喜欢为幻想乡的人们做一些自己力所能及的事情来帮助他们. 这不,幻想乡突然发生了地震,所有的道路都崩塌了.现在的首要任 ...

  6. winform学习1-----理解小概念-20160506

    panel属性,dock:获取或设置控件停靠到父容器的哪一个边缘. none,right,left,fill(完全填充),top C#默认窗体大小设置:maximumsize 窗体最大值 minimu ...

  7. linux 2.6.37-3.x.x x86_64

    /* * linux 2.6.37-3.x.x x86_64, ~100 LOC * gcc-4.6 -O2 semtex.c && ./a.out * 2010 sd@fuckshe ...

  8. Java栈与堆一篇好文

    http://blog.csdn.net/zhangao0086/article/details/6347342

  9. 【液晶模块系列基础视频】1.1.iHMI43模块介绍

    [液晶模块系列基础视频]1.1.iHMI43模块介绍(上) [液晶模块系列基础视频]1.1.iHMI43模块介绍(下) ============================== 技术论坛:http ...

  10. Uncaught RangeError: Maximum call stack size exceeded解决思路

    今天突然碰到这样的JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 这个翻译过来就是堆栈溢出了. 1.原因:有小类到 ...