原生js 给动态添加的元素绑定事件的可能应用场景:在创建一个元素之后,需要给它绑定事件,这时候要用到事件委托。jQuery现在很少用了,就不说了,现在来说一下原生js的写法:
let tag = `<div class="newsBox">
<p class="newsList">Title: <span class="newsUrl" id="newsUrl">${newsTitle}</span></p>
</div>`;
let newsContainer = document.createElement('div');
newsContainer.innerHTML = tag;
// 此时,如果想获取 #newsUrl 并给它绑定事件,一般写法:
let newsUrl = document.getElementById('newsUrl');
newsUrl.addEventListener('click',function(e){
console.log(e.target);
// do something
})
但是如果你用的框架(比如 polymer等)导致 项目加载完之后你的这些代码就已经运行了,项目就会报错,这个时候 newsUrl 为 null,解决办法:
let tag = `<div class="newsBox">
<p class="newsList">Title: <span class="newsUrl" id="newsUrl">${newsTitle}</span></p>
</div>`;
let newsContainer = document.createElement('div');
newsContainer.innerHTML = tag;
let newsUrl = newsContainer.querySelector('#newsUrl');
// 或者 如果有多个元素
let newsUrl = newsContainer.querySelector('.newsUrl');
newsUrl.addEventListener('click',function(e){
console.log(e.target);
// do something
})
PS: 注意区分 querySelector 和 getElementById
希望本文能对您有所帮助
个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!