vue动态追加html代码,Vue 使用v-html 动态加载代码 点击事件失效

使用vue+ztree展示地区时发现，拼接代码地区后显示新增、修改操作，click事件无效

两种解决方案：

1、事件绑定到window

2、手动添加点击事件

addHoverDom:function(treeid, treeNode) {

if(treeNode.id == ‘‘) return

const item = document.getElementById(`${treeNode.tId}_a`);

if(item && !item.querySelector(‘.tree_extra_btn_add‘)) {

const add = document.createElement(‘sapn‘);

add.id = `${treeid}_${treeNode.id}_btn_add`;

add.classList.add(‘tree_extra_btn_add‘);

add.innerHTML = ‘‘;

add.addEventListener(‘click‘, (e) => {

e.stopPropagation()

// this.addNode(treeNode)

this.updateTree();

})

item.appendChild(add)

}

if(item && !item.querySelector(‘.tree_extra_btn‘)){

const btn = document.createElement(‘sapn‘);

btn.id = `${treeid}_${treeNode.id}_btn`;

btn.classList.add(‘tree_extra_btn‘);

btn.innerHTML = ‘‘;

btn.addEventListener(‘click‘, (e) => {

e.stopPropagation()

this.clickRemove(treeNode)

})

item.appendChild(btn);

}

},

原文：https://www.cnblogs.com/acme6/p/13714165.html