解决一些动态生成dom无法直接绑定事件,绑定事件无效的问题

对于一些动态生成或者网页初始获取不到的元素,直接绑定事件无效,需要在dom树发生变化时判断所需dom是否生成。

(可能存在bug,后续完善)

核心代码:

    document.body.addEventListener('DOMSubtreeModified', function () { })
MutationObserver也可以实现,待整理,官方文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe

实践代码:

    //定义flag初始为true
    var flag = true
    //点击元素生成新的dom元素
    $('.proList-item_add').on('click', function () {
        //dom树发生改变时执行里面的内容
        document.body.addEventListener('DOMSubtreeModified', function () {
            //如果flag为true执行如下内容
            if (flag) {
                //判断发生变化的元素是否是所需元素,长度大于等于1即为生成
                if ($('.proDetail-option_btn').length >= 1) {
                    //dom生成后为dom绑定事件
                    $('.proDetail-option_btn .proDetail-option_btn--cart').on('click', function () {
                        console.log("绑定上了");
                    })
                    //绑定成功将flag变化为false,否则如果后续dom树继续发生变化会再次绑定
                    flag = false
                };
            }
        })
    })

 

posted @ 2021-12-03 14:54  从入门到入土  阅读(294)  评论(0编辑  收藏  举报