首页 > Web开发 > 详细

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

时间:2020-09-22 19:25:58      阅读:521      评论:0      收藏:0      [点我收藏+]

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

技术分享图片

 

两种解决方案:

1、事件绑定到window

技术分享图片

 

 技术分享图片

 

 

 2、手动添加点击事件

技术分享图片

 

 技术分享图片

 

 

addHoverDom:function(treeid, treeNode) {
        if(treeNode.id == ‘<ROOT>‘) 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 = ‘<span class="el-icon-edit mr-5px ml-5px" title="编辑"></span>‘;
          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 = ‘<span class="el-icon-delete" title="删除"></span>‘;
          btn.addEventListener(‘click‘, (e) => {
            e.stopPropagation()
            this.clickRemove(treeNode)
          })
          item.appendChild(btn);
        }


      },

  

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!