Question

原生javascript中，新生成的元素如何绑定事件

下面这段代码，点击按钮给ul添加了一个li，li中间有一个删除的按钮，页面中已有的删除按钮功能正常，但是新增的删除按钮删除不了，咋处理啊，求代码

<input type="button" id="btn1" value="添加" />
<ul id="ul1">
<li>dfasdfa<a href="javascript:;">删除</a></li>
<li>dfasdfa<a href="javascript:;">删除</a></li>
<li>dfasdfa<a href="javascript:;">删除</a></li>
</ul>

<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementById("btn1");
var oUl = document.getElementById("ul1");
var aA = oUl.getElementsByTagName("a");

oBtn.onclick = function(){
var oLi = document.createElement("li");
oLi.innerHTML = '11111111111<a href="javascript:;">删除</a>';
oUl.appendChild(oLi);
}

for(var i=0;i<aA.length;i++)
{
aA[i].onclick = function(){
oUl.removeChild(this.parentNode);
}
}
}
</script>

Answer 1

window.onload = function () {
    var oBtn = document.getElementById("btn1");
    var oUl = document.getElementById("ul1");
    var aA = oUl.getElementsByTagName("a");

    oBtn.onclick = function () {
        var oLi = document.createElement("li");
        oLi.innerHTML = '11111111111<a href="javascript:;">删除</a>';
        oUl.appendChild(oLi);
        // 在这里给新的a添加事件
        aA = oLi.getElementsByTagName("a");
        for (var i = 0; i < aA.length; i++) {
            aA[i].onclick = function () {
                oUl.removeChild(this.parentNode);
            }
        }
    }


    for (var i = 0; i < aA.length; i++) {
        aA[i].onclick = function () {
            oUl.removeChild(this.parentNode);
        }
    }
}

Answer 2

介个，你的代码已经实现了，只不过顺序需要调整一下下

把代码：
var aA = oUl.getElementsByTagName("a");//代码行的第三句

移动到
//____________
oBtn.onclick = function(){
var oLi = document.createElement("li");
oLi.innerHTML = '11111111111<a href="javascript:;">删除</a>';
oUl.appendChild(oLi);
}
//___________
下面：

Answer 3

oLi.innerHTML = '11111111111<a href="javascript:;">删除</a>';变成

oLi.innerHTML = '11111111111<a href="javascript:;" onclick="document.getElementById("ul1")
.removeChild(this.parentNode)">删除</a>';

即可。记得采纳哦