美文网首页
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);
        }
    }
}

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

相关文章

  • web前端面试题@六(事件委托)

    *说到事件委托,我们首先先要知道什么是事件委托—— · 那么什么是事件委托呢??? JS里的事件委托就是当事件...

  • JS写事件代理

    js中的事件委托或是事件代理详解

  • 事件委托

    事件委托 事件委托其实就是利用JS事件冒泡机制把原本需要绑定在子元素的响应事件(click、keydown……)委...

  • js事件委托

    通过构建父元素和子元素,来控制事件。 先通过html构建父元素div,并嵌套一个子元素div,写入不同的方法,设置...

  • js事件委托

    事件委托:1、缘由在做一个项目,点击按钮出现蒙版,但是触发蒙版关闭蒙版,但是给蒙版添加点击事件的话,蒙版上的按钮也...

  • js事件委托

    我们收取快递有两种方法:一是在特定的地点等快递的到来,二是委托人代收。现实当中,我们大都采用委托的方案。而委托人接...

  • JS事件委托

    一、事件委托有三种方法 点击 btn.onclick = function(){...} btn.addEvent...

  • js事件委托

    前言 事件委托,也叫事件代理,是js事件中的一种常用技巧。事件委托的原理就是利用冒泡事件的机制,为一些节点的祖先节...

  • js事件委托

    定义:通俗的讲,事件就是onclick,onmouseover,onmouseout等就是事件,委托呢,就是让别人...

  • JS事件委托

    事件委托从字面意思上理解就是把事件委托给别人做。这样有什么好处呢?设想一下,一个ul里有很多li,现在要给每一个l...

网友评论

      本文标题:JS事件委托

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