标签: js
坑位
最近开发一个需求,项目有用到jQuery和Vue,发现我jQuery绑定的事件全部都失效了。
Why
Vue会重新渲染dom,加上是异步实例Vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素。
解决方案
- 方案1:最彻底的方法是既然用了Vue就全部交给Vue就好了,不再引入jQuery
- 方案2: 既然Vue接管了并重新渲染dom,那我们就等Vue真正渲染重新渲染出dom了再执行我们的jQuery事件绑定,主要代码示例如下:
new Vue({
el: "testId",
mounted: function() {
this.$nextTick(function(){
// 在这里执行$()的dom事件绑定
...
})
}
})
方案2注意点:
- 针对你要通过jQuery绑定事件的元素不要使用v-if去显示隐藏,改用v-show吧;
- 尽量使用jquery的事件委托机制,这样可以针对后续生成的元素事件也做处理
- 事件绑定还是尽量通过@click方式来绑定吧;