Vue中，如何对动态生成的{{{topic.html}}}，对其中的 img 标签绑定onclick事件

问答

TTakWolf发布于10 年前最后回复10 年前|11 回复24167 浏览0 收藏

需求大概是这样的：

  <div id="page">
	  {{{topic.html}}}    
  </div>

var vm = new Vue({
    el: '#page',
    data: {
        topic: {}
    }
});

其中topic.html是就是html字符串，可能会不断更新，每次更新之后，都要对其中的img标签绑定onclick事件，应该怎么做？vue有办法解决吗？

目前是用jquery来实现的：

vm.$watch('topic', function () {
	$('#page img').unbind('click').click(function () { // 需要解绑，否则会重复绑定事件
		// some...
	});
});

这个思路是对的吗？不想引入jQuery

查看回复

lmk123#1·10 年前

你可以把 click 事件直接绑定在 #page 上：

$('#page').on('click', 'img', function() {
  // some...
});

然后在组件 beforeDestroy 时解绑事件。

alsotang#2·10 年前

jquery 有个 delegate 用法。就是不把事件绑在对应元素上，而是绑在更高的元素上来捕捉下面元素的点击事件。

soliury#3·10 年前

你也玩vue了？ From Noder

zouzhenxing#4·10 年前

动态组件？不知道能不能解决这个问题。明天试试 From Noder

TakWolf#5·10 年前

引用 soliury你也玩vue了？ From Noder

@soliury 这东西太好用了，打算前端全都转到vue上了

TakWolf#6·10 年前

引用 alsotangjquery 有个 delegate 用法。就是不把事件绑在对应元素上，而是绑在更高的元素上来捕捉下面元素的点击事件。

@alsotang 我研究一下

soliury#7·10 年前

@TakWolf 我们团队也打算全部转移到vue From Noder

klausgao#8·10 年前

解决了吗？要回来结贴哦

yunkou#9·10 年前

同楼上希望有总结帖

TakWolf#10·10 年前

@klausgao @yunkou 问题已解决根据大家的建议，都是通过代理事件的方式来实现。 vue的事件绑定支持原生的event参数，所以目前是这样解决的：

<div id="page" v-on:click="openImageProxy($event)">
    {{{topic.html}}}    
</div>
 
var vm = new Vue({
    el: '#page',
    data: {
        topic: {}
    },
    methods: {
        openImageProxy: function (event) {
            if (event.target.nodeName === 'IMG') {
                // event.target.src 这里做处理
            }
        }
    }
});

最终移除了jquery和属性监听

klausgao#11·10 年前

不错不错不错

参与回复

登录后即可参与回复。登录

Vue中，如何对动态生成的{{{topic.html}}}，对其中的 img 标签绑定onclick事件

回复 (11)