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

 更新时间:2014年03月05日 09:02:07   作者:  
本篇文章主要是对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";
});

相关文章

  • jqPlot jQuery绘图插件的使用

    jqPlot jQuery绘图插件的使用

    jqPlot是一个灰常强大的图表工具,曲线,柱状,饼图,应该有尽有,更要命的是,调用方便~~
    2016-06-06
  • jQuery实现弹幕效果

    jQuery实现弹幕效果

    本文主要分享了jQuery实现弹幕效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • jquery解析json格式数据的方法(对象、字符串)

    jquery解析json格式数据的方法(对象、字符串)

    这篇文章主要介绍了jquery解析json格式数据的方法,包括针对json对象及json字符串的解析技巧,并附带了完整的jQuery解析json数据示例,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jQuery使用$.ajax进行即时验证实例详解

    jQuery使用$.ajax进行即时验证实例详解

    这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下
    2015-12-12
  • jQuery 动态云标签插件

    jQuery 动态云标签插件

    这里推荐给大家一款jquery动态云标签的插件,非常的炫,在指定块级元素内动态生成a标签,a标签的高度、宽度、位置、层数、背景颜色随机可控,a标签渐隐显示和渐隐消失,可改变初始化的透明度,鼠标悬浮停止动画且透明度最大,层数最高,鼠标离开,恢复之前状态
    2014-11-11
  • easyUI实现类似搜索框关键词自动提示功能示例代码

    easyUI实现类似搜索框关键词自动提示功能示例代码

    本篇文章主要介绍了easyUI实现类似搜索框关键词自动提示功能示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-12-12
  • jQuery实现获取动态添加的标签对象示例

    jQuery实现获取动态添加的标签对象示例

    这篇文章主要介绍了jQuery实现获取动态添加的标签对象,涉及jQuery针对页面元素的动态添加、元素获取与事件响应相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • jQuery中insertBefore()方法用法实例

    jQuery中insertBefore()方法用法实例

    这篇文章主要介绍了jQuery中insertBefore()方法用法,实例分析了insertBefore()方法的功能、定义及把匹配的元素插入到另一个指定的元素集合前面的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery+php实现搜索框自动提示

    jquery+php实现搜索框自动提示

    百度上有个很使用的功能,就是用户在搜索的时候会自动提示相关搜索条件以供选择,非常人性化的设计,我们如何将此功能放到自己的项目中呢,经过一番研究,终于实现了此功能,分享给大家。
    2014-11-11
  • jQuery中选择器的基础使用教程

    jQuery中选择器的基础使用教程

    jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下
    2016-05-05

最新评论