jquery.page.js分页插件的问题,求jser解答。

漂流的河 发布于 2016/01/13 16:45
阅读 2K+
收藏 0
为什么用这个分页插件点击 上一页  下一页 时会运行两次函数,也就是比如当前页码是1,点了下一页,页码变成3了。
(function ($) {
    var ms = {
        init: function (obj, args) {
            return (function () {
                ms.fillHtml(obj, args);
                ms.bindEvent(obj, args);
            })();
        },
        //填充html
        fillHtml: function (obj, args) {
            return (function () {
                obj.empty();
                obj.append('<div class="page" id="homePage">首页</div>');
                //上一页
                if (args.current > 1) {
                    obj.append('<div  id="movePre" class="page">上一页</div>');
                } else {
                    obj.remove('#movePre');
                    obj.append('<div id="movePre" class="page disabledColor disabledBorder">上一页</div>');
                }
                //中间页码
                if (args.current != 1 && args.current >= 4 && args.pageCount != 4) {
                    obj.append('<li  class="page2">' + 1 + '</li>');
                }
                if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) {
                    obj.append('<li class="page1">...</li>');
                }
                var start = args.current - 2, end = args.current + 2;
                if ((start > 1 && args.current < 4) || args.current == 1) {
                    end++;
                }
                if (args.current > args.pageCount - 4 && args.current >= args.pageCount) {
                    start--;
                }
                for (; start <= end; start++) {
                    if (start <= args.pageCount && start >= 1) {
                        if (start != args.current) {
                            obj.append('<li class="page2">' + start + '</li>');
                        } else {
                            obj.append('<li class="curPage">' + start + '</li>');
                        }
                    }
                }
                if (args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5) {
                    obj.append('<li class="page1">...</li>');
                }
                if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) {
                    obj.append('<li class="page2">' + args.pageCount + '</li>');
                }
                //下一页
                if (args.current < args.pageCount) {
                    obj.append('<div id="moveNext" class="page">下一页</div>');
                } else {
                    obj.remove('#moveNext');
                    obj.append('<div id="moveNext" class="page disabledColor disabledBorder">下一页</div>');
                }
                obj.append('<div class="page" id="endPage">末页</div>');
            })();
        },
        //绑定事件
        bindEvent: function (obj, args) {
            return (function () {
                //点击当前页
                obj.on("click", ".page2", function () {
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj, {"current": current, "pageCount": args.pageCount});
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
                //上一页
                obj.on("click", "#movePre", function () {
                    var current = parseInt(obj.children("li.curPage").text());
                    ms.fillHtml(obj, {"current": current === 1 ? 1 : current - 1, "pageCount": args.pageCount});
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current - 1);
                        if(current==1){
                            args.backFn(current);
                        }
                    }
                });
                //下一页
                obj.on("click", "#moveNext", function () {
                    var current = parseInt(obj.children("li.curPage").text());
                    ms.fillHtml(obj, {
                        "current": current === args.pageCount ? args.pageCount : current + 1,
                        "pageCount": args.pageCount
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current + 1);
                        if (current == args.pageCount) {
                            args.backFn(current);
                        }
                    }
                });
                //首页
                obj.on("click", "#homePage", function () {
                    var current = 1;
                    ms.fillHtml(obj, {
                        "current": current,
                        "pageCount": args.pageCount
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
                //末页
                obj.on("click", "#endPage", function () {
                    var current = args.pageCount;
                    ms.fillHtml(obj, {
                        "current": current,
                        "pageCount": args.pageCount
                    });
                    if (typeof(args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function (options) {
        var args = $.extend({
            pageCount: 10,
            current: 1,
            backFn: function () {
            }
        }, options);
        ms.init(this, args);
    }
})(jQuery);


加载中
0
wuyiw
wuyiw
在bindEvent开头加个console.log('bind')看看是不是绑定了两次?
wuyiw
wuyiw
回复 @漂流的河 : 恩, 删掉已创建的分页然后新建吧...这个插件似乎是一次性的..
漂流的河
回复 @wuyiw : 那能在插件里解决这个问题吗,还是要两次绑定不同的节点来处理?
wuyiw
wuyiw
回复 @漂流的河 : 是的, 所以页码两次+1变成3了.
漂流的河
我是获取数据的时候绑定了一次,然后通过查询获取数据时又绑定了一次,都是同一个节点,第一次绑定插件是正常的,第二次就有问题了,请问是这个的原因吗?
0
e
eviZhao
您好 请问您解决了这个问题了吗?
漂流的河
回复 @面条妹妹 : $(id).unbind()为节点解绑事件,再去绑定就好了。
漂流的河
@o0luny0o 回复@o0luny0o : 不好意思,很久没登录了,每次给节点绑定前用$(id).unbind()解绑就好了
面条妹妹
面条妹妹
回复 @漂流的河:你好如何解绑啊,我用阻止冒泡有问题
o0luny0o
o0luny0o
回复 @漂流的河 : 额,实现了0.0
o0luny0o
o0luny0o
回复 @漂流的河 : 请问如何解绑
下一页
返回顶部
顶部