Vue.js项目中使用jQuery动态添加html并绑定click事件,事件无法触发methods中方法的解决办法
2019-03-14 14:36
1366 查看
首先,明确问题点。
在Vue.js项目中,引入jQuery,然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件,当鼠标点击时触发methods中某方法进行处理,但是,发现鼠标点击并没有触发该方法!
该问题在实际开发过程中遇到过一次,但今天遇到后,忘记了之前是怎么处理的,又浪费了1个多小时的时间查资料~ 所以,写篇博客记录一下吧~
解决方法:
例如:
(1)、jQuery动态添加html元素
html = html + "<div class='test' onclick='clickTest(event)'>" + e + "</div>"
$('#test_div').append(html) //在id为test的容器中添加html所拼接的元素
$("#test_div").empty(); //清空id为test的容器中的所有元素
(2)、在methods中定义方法
clickTest: function () {
console.log("Vue.js")
}
(3)、在created()方法中
self = this
window.clickTest= self.clickTest
解决~
相关文章推荐
- jQuery动态添加元素无法触发绑定事件的解决方法分析
- 解决使用JQuery或JS动态添加的元素无法绑定事件的问题
- 动态生成的html中无法使用jquery事件的解决方法
- HTML中关于动态创建的标签无法绑定js事件的解决方法
- jquery live方法,解决jquery动态添加按钮无法触发点击事件的问题
- 微信公众平台接口 动态生成html图片预览无法使用jquery事件的解决方法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】
- jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
- jquery使用append动态增加元素,该元素绑定事件失效的解决办法
- EasyUI中,使用jquery或者js动态添加元素,验证失效的解决办法
- 解决jquery中动态新增的元素节点无法触发事件问题的两种方法
- Jquery动态添加节点,绑定事件失效的解决方法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
- jquery无法为动态生成的元素添加点击事件的解决方法
- 对于js使用append追加的节点无法添加事件的解决方法
- jquery无法为动态生成的元素添加点击事件的解决方法
- 动态添加新元素事件无法触发解决方法
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结