最近在进行项目模块的迭代开发工作,偶尔会碰到几个值得记录的问题,这里就给大家整理分享一下,以及相应的解决方案。
一、问题
在 HTML 中我们需要使用
js向
HTML` 文档中插入内容,有两种方法,一种是 JS 创建节点,然后插入到 HTML 中;另外一种是通过 ajax 异步加载的方式,从服务器获取数据,然后用 JS 把获取的数据经过处理后插入 HTML 中。
这时一般使用 innerHTML
动态创建DOM节点树,但是需要触发绑定在上面的相关事件时,会提示失效,或者提示当前方法未定义。
二、原因
js 代码和 html 代码的顺序不可更改,当需要的内容还没有被插入到页面时,选择器只会选择页面中已经存在的元素,所以事先没有存在元素是绑定不了事件的。
三、解决方案
我们需要把后来生成的元素绑定上事件,并注册上事件处理函数。
注意:要关注一下 this
的指向问题。
代码示例
let scan = document.getElementById('scan'); // 需要动态添加数据的标签容器
if(this._data.notExpire) {
let scanHTML = `<img src="${data.base64QrCode}" alt="" class="scan-img"><p class="scan-font">请使用<span class="scan-font-wx">微信</span>扫描二维码登录</p>`
scan.innerHTML = scanHTML;
} else {
let scanHTML = `<div>
<div class="mask">
<div class="sx">
<p class="sx-msg">二维码已失效</p>
<div class="btn-sx" id="btn-sx">刷新二维码</div>
</div>
</div>
<img src="${data.img}" alt="" class="scan-img">
</div>
<p class="scan-font">请使用<span class="scan-font-wx">微信</span>扫描二维码登录</p>
`
scan.innerHTML = scanHTML;
// 上面这部分添加到html中以后,添加 onclick 事件无效,所以需要进行事件绑定/监听
let _this = this; // 记得关注一下 this 指向
document.getElementById("btn-sx").addEventListener("click", function() {
// 具体执行代码
} , false);
}
给新生成的DOM节点(动态生成节点)绑定事件方法总结
-
jquery写法
// on方法包含很多事件,点击,双击等等事件。 $(选择器).on('click', function(){ // 事件回调函数 })
-
js原生写法
// 直接使用选择器进行绑定监听 document.querySelector('选择器').addEventListener('click',function (e) { // 事件回调函数 }) // 可以直接取id,btn是id btn.addEventListener('click',function (e) { // 事件回调函数 })
通过上面两种绑定事件的方法,可以轻松解决今天这个问题。
欢迎大家留言讨论,共同进步。
加油!