美文网首页
JS事件委托

JS事件委托

作者: 天山的虫 | 来源:发表于2017-11-27 10:05 被阅读0次

    起因:AJAX动态生成HTML时,我需要输出两个Button按钮,代码如下:

           response.data.forEach(function(obj, i){
                        var html="<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.email+"</td><td>"+obj.role+"</td><td><button type='button' class='btn btn-warning'  onclick='modifierMethod()'>修改</button><button type='button' class='btn btn-danger' name="+obj.name+" onclick='deleteMethod()'>删除账号</button></td></tr>";
                        tbody.innerHTML+=html;
                    });
    

    现象:输出完成后,发现确实存在两个按钮,但是和按钮绑定的事件一直未能生效

    原因:还没有这个元素的时候就绑定完了事件,等AJAX动态生成完,已经没有绑定了

    解决:对这个动态生成的HTML做一个事件委托,代码如下:

    window.onload=function(){
        var oul=document.getElementById("account");
        oul.onclick=function(ev){
            var ev=ev || window.event;
            var target= ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase()=="button"){
                deleteAccount(target.name);
            }
        }
    }
    

    扩展延伸:事件委托
    日后再更新...

    相关文章

      网友评论

          本文标题:JS事件委托

          本文链接:https://www.haomeiwen.com/subject/cfsrbxtx.html