您的位置:首页 > Web前端 > Vue.js

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

 

解决~

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐