Appearance

js动态添加dom,如何绑定事件

原理

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可。

注意

其次需要注意的是,在你可能同时需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以了。

代码

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>添加div并绑定点击事件</title>
    <style>
        div.btn{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: solid 1px #000;
            cursor: pointer;
        }
        div.innerDiv{
            width: 50px;
            height: 50px;
            background-color: black;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="aa">
        <div class="btn">添加div并绑定点击事件</div>
        <div class="outerDiv"></div>
    </div>
    <script>
        function getClass(classname) {
            return document.getElementsByClassName(classname);
        }
        getClass('btn')[0].onclick=function () {
            addDom();
        }
        //    将点击事件封装为函数
        function funA() {
            for(var i=0;i<getClass('innerDiv').length;i++){
                getClass('innerDiv')[i].onclick=function () {
                    alert(this.innerText);
                }
            }
        }
        //    将添加dom封装为函数
        function addDom() {
            var oldHtml='';
            for(var j=0;j<6;j++){
                oldHtml+='<div class="innerDiv">'+j+'</div>'
            }
            getClass('outerDiv')[0].innerHTML=oldHtml;
            funA();
        }
        //    如果将函数A放在这里就不会起作用的
        //    funA();
    </script>
</body>
</html>

个人博客:午后南杂open in new window