jQuery 和 Vue 冲突的情况分析以及解决方案

 

jQuery 绑定事件失效

先对 jQuery 对象绑定事件,之后创建 Vue 对象,这样会导致绑定的事件失效。

//对jQuery对象绑定事件
$("#id").on("change", function () {
    //action……
});

问题所在:

定义 jQuery -> 正常关联DOM -> 使用 Vue -> jQuery与DOM断开关联

具体原因不清楚,在 Chrome 调试中发现,在使用 Vue 之前定义的 jQuery 对象与当前文档元素失去了关联。

比如我先定义一个 oDiv = $("#id1"),对应的 DOM 里面 id=id1 的 div 元素(两者相关联)。

当我操作 oDiv 时,对应 DOM 里面的 id=id1 的 div 会相应变化。

这时候,我使用 Vue 对象。

在之后,我再操作 oDiv ,DOM 里面 id=id1 的 div 元素不再响应变化(两者断开关联,是两个不同的对象)。

这里估计是 Vue 监听 DOM 的时候做的一些操作导致的。

解决方案1:

绑定事件对 document 绑定

//对jQuery对象绑定事件
$(document).on("change", "#id", function () {
    //action……
});

解决方案2:

在 Vue 后面使用 jQuery

 

jQuery 和 Vue 冲突的情况分析以及解决方案

上一篇:HTML的基础知识


下一篇:Url 重写模块安装失败 , 若要安装iis URL重写模块2,需要iis7.2版或更高版本