layui同一页面绑定两次流加载，导致数据串了

版权声明：感谢您的阅读,转载请联系博主QQ3410146603。 https://blog.csdn.net/newMan67/article/details/86657539

需求如下

1. 在页面A打开时，默认查询所有的人员信息；
2. 在页面A中点击搜索时，查询出符合条件的人员信息。

---

代码如下：

问题如下

查询后，滚动滚轮到底部后，进行了两次查询，一次是默认查询，一次是搜索查询。

另附layui的load.js美化后的代码

/** layui-v2.4.5 MIT License By https://www.layui.com */ ;
layui.define("jquery", function (e) {
    "use strict";
    var l = layui.$,
        o = function (e) {},
        t = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon ">&#xe63e;</i>';
    o.prototype.load = function (e) {
        var o, i, n, r, a = this,
            c = 0;
        e = e || {};
        var f = l(e.elem);
        if (f[0]) {
            var m = l(e.scrollElem || document),
                u = e.mb || 50,
                s = !("isAuto" in e) || e.isAuto,
                v = e.end || "没有更多了",
                y = e.scrollElem && e.scrollElem !== document,
                d = "<cite>加载更多</cite>",
                h = l('<div class="layui-flow-more"><a href="javascript:;">' + d + "</a></div>");
            f.find(".layui-flow-more")[0] || f.append(h);
            var p = function (e, t) {
                    e = l(e), h.before(e), t = 0 == t || null, t ? h.html(v) : h.find("a").html(d), i = t, o = null, n && n()
                },
                g = function () {
                    o = !0, h.find("a").html(t), "function" == typeof e.done && e.done(++c, p)
                };
            if (g(), h.find("a").on("click", function () {
                l(this);
                i || o || g()
            }), e.isLazyimg) var n = a.lazyimg({
                elem: e.elem + " img",
                scrollElem: e.scrollElem
            });
            return s ? (m.on("scroll", function () {
                var e = l(this),
                    t = e.scrollTop();
                r && clearTimeout(r), i || (r = setTimeout(function () {
                    var i = y ? e.height() : l(window).height(),
                        n = y ? e.prop("scrollHeight") : document.documentElement.scrollHeight;
                    n - t - i <= u && (o || g())
                }, 100))
            }), a) : a
        }
    }, o.prototype.lazyimg = function (e) {
        var o, t = this,
            i = 0;
        e = e || {};
        var n = l(e.scrollElem || document),
            r = e.elem || "img",
            a = e.scrollElem && e.scrollElem !== document,
            c = function (e, l) {
                var o = n.scrollTop(),
                    r = o + l,
                    c = a ? function () {
                        return e.offset().top - n.offset().top + o
                    }() : e.offset().top;
                if (c >= o && c <= r && !e.attr("src")) {
                    var m = e.attr("lay-src");
                    layui.img(m, function () {
                        var l = t.lazyimg.elem.eq(i);
                        e.attr("src", m).removeAttr("lay-src"), l[0] && f(l), i++
                    })
                }
            },
            f = function (e, o) {
                var f = a ? (o || n).height() : l(window).height(),
                    m = n.scrollTop(),
                    u = m + f;
                if (t.lazyimg.elem = l(r), e) c(e, f);
                else
                    for (var s = 0; s < t.lazyimg.elem.length; s++) {
                        var v = t.lazyimg.elem.eq(s),
                            y = a ? function () {
                                return v.offset().top - n.offset().top + m
                            }() : v.offset().top;
                        if (c(v, f), i = s, y > u) break
                    }
            };
        if (f(), !o) {
            var m;
            n.on("scroll", function () {
                var e = l(this);
                m && clearTimeout(m), m = setTimeout(function () {
                    f(null, e)
                }, 50)
            }), o = !0
        }
        return f
    }, e("flow", new o)
});

解决办法

从load.js源码中发现，load函数是当用户没有设置scroll的对象时，默认绑定到doucment这个全局对象上。因此，可以在点击搜索按钮执行的函数中加入：用来解除上次document对象上绑定的所有事件。

$(document).unbind();

解决了您的问题，拜请您收藏和点赞。由衷感谢您的支持和打赏！

领红包	支付宝	微信