JS在DOM渲染完成之前被执行解决方案

Js dom 04/05/2020

JS在DOM渲染完成之前被执行

经常遇到一个问题就是,在操作某些动态添加的元素的时,往往无法选中这些的元素。如果是需要绑定事件在相应 dom 上,那可以使用 jquery 的 on 事件为其动态添加的元素做相应操作。

而在某些特定情况下,我们需要操作的元素不需要绑定任何事件,这时候再使用 on 事件就没用了(网上说可以用 delegate()代替,不过测试无效),这时候我们需要去监听动态添加的 dom 元素是否已经加载,加载完成之后再执行相应代码。

jQuery .on() 绑定事件

$('body').on('event','.dynamic',function(){
    //..
});

如果需要绑定多个元素可以:

$('body').on({
    event: function() {
        //..
    }
},".dynamic_1, .dynamic_2");

setTimeOut 不绑定事件检测

创建一个定时器来检测 dom 是否加载,

setTimeout(() => {
    //..
}, 0);

可参考链接: javascript-html-collection-showing-as-0-length