Vue.js项目中使用jQuery动态添加html并绑定click事件，事件无法触发methods中方法的解决办法

首先，明确问题点。

         在Vue.js项目中，引入jQuery，然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件，当鼠标点击时触发methods中某方法进行处理，但是，发现鼠标点击并没有触发该方法！

         该问题在实际开发过程中遇到过一次，但今天遇到后，忘记了之前是怎么处理的，又浪费了1个多小时的时间查资料~     所以，写篇博客记录一下吧~

 

解决方法：

        例如：

（1）、jQuery动态添加html元素

        html = html + "<div class='test' οnclick='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

 

解决~