解决一些动态生成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 }; } }) })