vue脚手架vue-cli 中 引入 jquery 把某个按钮 加上点击事件 事件 第一次 成功 第二次就失效了

最新推荐文章于 2024-04-29 11:52:08 发布
最新推荐文章于 2024-04-29 11:52:08 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： vue实践 vue-cli jquery 文章标签： vue jquery  点击事件失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41296616/article/details/79694214
版权
vue实践 同时被 3 个专栏收录
23 篇文章 0 订阅
订阅专栏
vue-cli
6 篇文章 0 订阅
订阅专栏
jquery
3 篇文章 0 订阅
订阅专栏

这里 其实 涉及到了  vue生命周期     当我们 引入jq   是不是 每次都要写$(function(){})或者是document.ready 等 代码 其实 这里可以看出 jq 生效也是有生命 周期得       所以  我们让jq 生效  必须在生命周期内     我们在这里 可以利用 vue生命周期   把jQuery中的代码放到mounted中  此时  就可以 生效了


看下图


小马哥的天涯
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 点击事件失效
Hero_rong的博客
11-10 1万+
点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了 @click.stop="doSomething($event)" 2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native @click.native='setUp(index)' 3.如果项目中的某些组件，使用了
2021-08-02 Jquery 监听click事件，只触发一次，第二次点击就失效
wangfeng117254的博客
08-02 1896
Jquery 监听click事件，只触发一次，第二次点击就失效只触发一次的写法解决方案 案例以class为选择器，也可以换成id 只触发一次的写法 $(".fc-prev-button").click(function(){}) 或 $(".fc-prev-button").on(“click”,function(){}); 解决方案 $(document).on(“click”,".fc-prev-button",function(){}); ...
vue跟jQuery中的事件冒泡、事件捕获、事件委托（事件代理）
最新发布
weixin_45392204的博客
04-29 1274
鼠标点击或者触发了dom事件，浏览器会从根节点（Document 对象）流向目标元素，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标元素。在捕获完成后，与事件捕获相反，事件会从目标元素流向文档根节点，途中会经过目标元素的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。一直向下到目标元素后，从目标元素开始向上执行冒泡元素。
jquery项目引入vue和elementui遇到的坑
wenjinrong的博客
12-07 2724
切记引入elementui的前提是引入vue 常见出错的情况： 一个简单的html页面或者一个非vue的项目，想要引入elementui的组件，然后引入elementui之后发现样式不起作用，很大一个原因就是没有引入vue 为方便此处CDN引入 <!--引入 element-ui 的样式，--> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> .
Vue简单练习封装button按钮 直接上代码和效果图
weixin_42201272的博客
03-24 764
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
解决vue第一次弹窗以后第二次就不弹窗的问题
Mjxiaomihu的博客
08-08 4757
解决vue第一次弹窗以后第二次就不弹窗的问题
同时使用vue 和 jquery， jquery事件绑定失效
Lv骚年
08-21 6322
问题： 一个h5项目同时引用了vue.js和jquery.js， 发现jquery绑定的事件失效。 原因是： vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素. 解决办法： 先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件 $(document).ready(function(){ ...
记录Vue和Jquery混合开发中关于点击事件的一个bug
weixin_33816300的博客
01-04 1050
最近比较急的接手了公司的微信服务号项目，采用的技术栈主要是jq和vue。在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用，只能写在vue实例中的methods中，然后用@click去监测。 一直困惑的是这个BUG在不同的页面中有时有，有时没有，而且出现的情况很少。今天工作闲了一点，于是乎专心去琢磨这个问题。 网上百度到的解决方案是这样的，如下图...
Vue.js项目中使用jQuery动态添加html并绑定click事件，事件无法触发methods中方法的解决办法
weixin_38974419的博客
03-14 1万+
首先，明确问题点。 在Vue.js项目中，引入jQuery，然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件，当鼠标点击时触发methods中某方法进行处理，但是，发现鼠标点击并没有触发该方法！ 该问题在实际开发过程中遇到过一次，但今天遇到后，忘记了之前是怎么处理的，又浪费...
vue和jq中实现点击任意地方关闭弹窗
涐的野心就是占有沵
05-04 2986
有时候 开发中会遇到这样一个需求 点击任意地方关闭弹窗 1.先用jq实现效果// 点击任意地方关闭遮罩层 除了指定区域 $('#最大的父容器区域').bind('click', function(e) { var e = e || window.event; //浏览器兼容性 ...
jq给vue脚手架项目动态添加元素添加事件及子组件间传递数据方法
qq_38854533的博客
09-23 424
vue脚手架项目中package.json引入jq依赖包： "jquery": "^3.5.1", //^表示下载3.5的最新版本； //~的话表示下载3的最新版本； //无符号表示指定版本 命令下载所有依赖包： cnpm install//境内淘宝镜像下载速度会更快些 npm install 在需要用jq的组件/模板页引入jq import $ from 'jquery' vue子组件中动态生成的元素添加事件方法： //先引入eventBus import eventBus from "@/u
vue 按钮多次点击重复提交数据
马优晨
04-18 7061
这个其实是一个很细节的问题。 如果我们操作一个按钮，然后在按钮点击的时候绑定事件。 事件分为两种情况： 第一种： 不操作数据型 第二种： 操作数据型 &lt;template&gt; &lt;button @click="submit()" :disabled="isDisable"&gt;点击&lt;/button&gt; &lt;/template&gt; &lt;script
jQuery事件处理 on() 绑定事件
vue_ajks的博客
08-12 1351
jQuery事件处理 on() 绑定事件
vue @click的时候，第一次点击无效，第二次才有效果
热门推荐
只是晓云闲的博客
06-13 2万+
<select type="button" v-model="typhoonYear" @click="getselectYearByDistinct" @change="getTyphoonListByYear"> <option value="">--请选择--</option> <option v-for='item in typ...
vue类似jq触发事件
lonerwolfs的博客
10-28 190
<input ref="before_file" type="file"> <span @click="$ref.before_file.click()" class="pa_le10 spelling_lesson flex flex_a_c"> </span >
帮我写一个代码测试vue-cli搭建的项目中jquery是否成功导入
05-10
然后，在你的 Vue 项目中的入口文件（例如`main.js`）中引入 jQuery： ```js import $ from 'jquery' ``` 最后，你可以在你的 Vue 组件中使用 `$` 来测试 jQuery 是否成功导入。例如，在你的组件中添加以下代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值