现在位置首页 / Jquery/Jquery Mobile /正文

jquery mobile快速点击事件插件--解决tap点击2次的问题

作者: IT小兵 | 2013年8月13日| 热度:℃ | 评论: |参与:

在jqm项目中,使用了Listview加载和展示数据,默认加载5条,当点击加载更多的时候,

获取新数据到Listview中,并刷新。

如图:

jquery mobile tap点击2次问题

原来步骤如下:

1)tap事件绑定:

        $('#aaddmore').bind('tap', function () {

            GetArticleList(maxid);

        });

2)Ajax数据请求返回后,回调函数--数据展示:

粗体部分是append函数,并调用listview的refresh刷新一下。

function GetArticleList(tempartiid) {

    var AjaxUrl = "Data/Article.aspx?tp=1&Ad=" + tempartiid + "&sq=" + sd + "&ud=" + ud + "&ky=" + key;

    //aaddmore 

    var html = "";

    $.ajax({

        type: "get",

        url: AjaxUrl,

        data: { minid: maxid },

        success: function (data, textStatus) {

            if (data != null) {

                var html = "";

                $.each(data, function (index, val) {//var sd =  $.request.queryString["clientId"]; 

                    html = html + "<li><a href=\"index.aspx?articleid=" + val.ArticleID + "&clientId=" + sd + "&openid=" + ud + "&key=" + key + " \" data-transition=\"slidedown\">";

                    html = html + "  <img src=\"" + val.Cover + "\"/> ";

                    html = html + "  <h2> " + val.Title + "</h2> <p class=\"classement four\"> " + val.Summary + " </p> </a></li>"; 

                    maxid = val.ArticleID;

                }); 

                $("#thelist").append(html); $("#thelist").listview('refresh');

            }

        },

        complete: function (XMLHttpRequest, textStatus) {


            //HideLoading();

        },

        error: function (e) {

            //请求出错处理

        }

    });

}

但是问题来了,如图。新数据和加载更多信息按钮会重叠,有tap的触发事件一般在300毫秒左右,所有在点击按钮完成后,

会接着点击新出现的数据。导致程序流程错误。

jquery mobile 快速点击插件

网上google和群里问了这个问题。

解决办法:

  1. 延迟加载:

    在加载html的地方,使用延迟时间加载的办法。             


       $("#thelist").append(html); $("#thelist").listview('refresh'); 替换吃:  setTimeout(SHowHtml(html), 300);

    但是在我这个项目里,不管用。

  2. 使用快速点击事件插件:jQuery.Event.Special.Fastclick。项目地址;

    https://github.com/Plaputta/jquery.event.special.fastclick 

    该插件支持一般的点击事件。它主要是用在移动浏览器上。因为移动端触摸tap事件

    在300ms左右,这样会带来最明显的就是上面的问题。

    使用方法:

    在引用jquery框架代码后,引用:

             <script src="Content/Scripts/jquery.event.special.fastclick.js" type="text/javascript"></script>

    调用方法:

     $('#aaddmore').bind('fastclick', function () {

            GetArticleList(maxid);

        });

经过测试,该方法有效。

有问题可以留言。

也欢迎大家到我的博客:http://suchso.com 留言。

点击阅读本文所属分类的更多文章: Jquery/Jquery Mobile 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询