zoukankan      html  css  js  c++  java
  • 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

    解决方案3:

    使用 $(document).ready(),在文档加载完毕再执行 jquery 相关操作

    $(document).ready(function(){
        //执行jquery
    });
    

      

  • 相关阅读:
    Python开发【第二十一篇】:Web框架之Django【基础】
    梳理
    Python Day15 jQuery
    day12 html基础
    Python day11 Mysql
    锻炼马甲线
    第一章:软件性能测试基本概念
    第4关—input()函数
    第3关—条件判断与嵌套
    第2关—数据类型与转换
  • 原文地址:https://www.cnblogs.com/clis/p/14684714.html
Copyright © 2011-2022 走看看