Vue.js项目中使用jQuery动态添加html并绑定click事件,事件无法触发methods中方法的解决办法
首先,明确问题点。在Vue.js项目中,引入jQuery,然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的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
解决~
更多推荐
所有评论(0)