vue中拼接html，点击事件失效的解决办法

最新推荐文章于 2024-03-22 16:10:59 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-03-22 16:10:59 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/boyit0/article/details/125103635

vue 专栏收录该内容

15 篇文章

订阅专栏

在Vue环境中，使用jQuery动态添加的HTML元素无法直接通过`on`方法绑定点击事件。解决方法是在HTML中直接为元素添加`onClick`属性并定义相应函数，例如`Fristclick`、`Secondclick`、`Thirdclick`，并将这些函数定义在全局作用域。同时确保在Vue应用中正确引入jQuery，并在`append`操作后设置事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

普通情况下拼接html想添加点击事件科通过jquery on绑定事件，但是在vue模板中，这种方法会失效；点击事件并没有反应；

<div class="tag"></div>

var html='<ul class="ultab">'
	+'<li class="active" data-val="0">日</li>'
	+'<li data-val="1">月</li>'
	+'<li data-val="2">年</li>'
	+'</ul>'

$(".tag").append(html);

$(".tag").on("click","li",function(){
	console.log($(this).html())												
});

append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件；

页面并不会为未来的元素初始化添加点击事件，所以使用这种方式动态添加的节点中的点击事件没有生效。

解决办法：

<div class="tag"></div>

var html='<ul class="ultab">'
	+'<li class="active" data-val="0" onClick="Fristclick(event,this)">日</li>'
	+'<li data-val="1" onClick="Secondclick(event,this)">月</li>'
	+'<li data-val="2" onClick="Thirdclick(event,this)">年</li>'
    +'</ul>'

$(".tag").append(html);

window.Fristclick = function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};
window.Secondclick= function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};
window.Thirdclick= function(event, el) {
   var type=$(el).data("val"); 						    
   this.changeTbody(type)
   $(".ultab li").removeClass('active');	
   $(el).addClass("active");
};

提示：需要vue页面引入jquery，点击事件需要写在append之后；

npm install jquery --save-dev
main.js 中 import $ from 'jquery'