js 为动态添加的元素绑定事件

JavaScript04

js 为动态添加的元素绑定事件,第1张

想必大家都有遇到过,DOM动态添加的元素,你给它绑定的事件是不起作用的。目前有两种办法,为动态添加的元素绑定事件

⚠️ 动态添加的子元素一定要放在on()方法里面,并且on()方法里面的 childSelector 必须要是 selector 的子元素,否则动态添加的元素绑定的事件依旧无效

1、动态创建元素时,将事件触发方式加入到元素创建中

例如:

document.getElementById('id').innerHTML='<input type="button" onclick="btnClick()" value="aaa"/>'

function btnClick(){

    alert('事件触发')

}

2、动态创建元素完成后,重新获取该元素绑定事件

例如:

document.getElementById('id').innerHTML='<input type="button" id="btn" />'

document.getElementById('btn').onclick=function(){

    alert('事件触发')

}

你可以在 append 了元素之后 , 在这个代码的后面 查找刚才添加的元素,然后绑定事件。 也可以使用 jquery 的方法 .on 给他的父元素绑定事件监听, 更直接的是, 在append 的元素中 设置其 属性 onclick = “函数名()”