Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了。
理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行。

原因

问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,所以说新数据渲染的标签并没有jquery
的方法。

解决办法

使用vue不适合jquery来渲染数据,如果非得用jquery渲染的话,比较好的办法就是使用一个侦听器(watch)来监听数据的变化,当请求回数据来的时候在使用jquery渲染。
当然这还有问题,就是请求回来数据不代表已经在界面for循环完了,所以要延时10毫秒左右之后再执行jquery渲染,这样,就解决了这个问题。

设置一个侦听器侦听 goodsDetails 的变化,当请求回数据,赋值给 goodsDetails 时,goodsDetails 发生变化,被侦听器检测到,调用useJquery 方法,重新渲染。

调用jquery方法渲染的时候,使用计时器延时10毫秒左右。

完成!

原文地址:https://www.cnblogs.com/wjw1014/p/12394641.html

时间: 2024-08-15 01:14:51

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效的相关文章

vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法

1 <div class="students-box" @click="clickSwiper"> 2 // 将点击事件绑定在父元素上 3 <carousel 4 :items="5" 5 :autoplay="true" 6 :nav="true" 7 :margin="20" 8 :loop="true" 9 :autoplayTimeout=&

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题 我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

微信公众号弹出框在IOS最新系统中点击键盘上的"完成"导致事件无法触发问题 问题描述 微信公众号中有项功能是弹框模态框,输入信息后保存操作.但是在IOS系统中发现,当输入内容后,点击键盘上的"完成"后,再点击"提交"无反应:跳过"完成"直接点击"提交"就可以正常保存 问题原因 当键盘弹出后,会将body向上弹起:但是点击"完成"后并没有将body拉回,导致点击事件不在body内而无法触发

vue 中数据没有同步渲染的解决方法

今天在做一个页面,遇到一个数据渲染不同步的问题,如下: 代码如下:原理:点击时,对应的banklist 的选项选项变为 true 选中状态 html: <div class="PayOrder"> <div class="header"> <span class="iconfont"></span> 支付首页 </div> <div class="title"

小程序echarts数据不改变,或者是一次渲染成功,第二次进入,渲染失败的解决办法

1.引入echarts插件: import * as echarts from '../../ec-canvas/echarts'; 2.data中定义: ecBar: { onInit: initChart }, 3.app.js中定义全局变量: globalData: { userInfo: null, all_date: [] }, 4.onload中,定义一个  all_date ,用来接收数据 5.循环出来的数据,赋值:app.globalData.all_date = all_dat

android蓝牙(二)——接收数据

在蓝牙开发中,我们有这样的一个需求:我们的android客户端要始终保持和蓝牙的连接,当蓝牙有数据返回的时候,android客户端就要及时的收取数据,当蓝牙没有数据返回的时候我们就要保持android客户端和蓝牙之间的连接.这个时候我们就要采取socket来实现和蓝牙之间的连接.做项目使用过http轮询去获取数据,但是发现那样总是有一定的弊端.于是就才用了socket方式去获取数据. 实现步骤:1.启动一个service去监听是否有数据返回.一旦有数据返回就启动一个线程去处理数据 2.处理完数据

蓝牙连接后,启动子线程接收数据,主线程卡住了

============问题描述============ 我看了下google的bluetoothchat的demo,它那里把蓝牙建立客户端连接的部分也放在子线程里执行的. 我目前的程序,蓝牙建立连接的步骤是在UI线程里,但是bluetoothSocket接收数据的部分是在子线程中的,但是现在碰到一个问题,开启子线程后,主线程不接着往下执行了. 根据我的日志记录,connectedThread.run();之后的日志方法LogHelper.Write("已经运行过子线程");就一直卡着

发送和接收数据包

发送和接收数据包 原文:Game Networking系列,作者是Glenn Fiedler,专注于游戏网络编程相关工作多年. 概述 在之前的网游中的网络编程系列1:UDP vs. TCP中(推荐先看前面那篇),我们经过讨论得出:网游中传输数据应该使用UDP而不是TCP.我们选择UDP是为了不需要等待重发数据包,从而达到数据的实时性. 注意,因为接下来英文原文中所有的代码是C++写的,而我是个pythoner,我的计划是:通过理解文章,我用python实现UDP收发数据包.虚拟连接(原文后两章的

三、MyBatis系列:Mapper 映射 之 使用POJO实体来接收数据和传入参数

1.首先定义一个接收数据的实体 User 类型,还有一个输入参数的 UserQuery 类型. 1 public class User { 2 public int id; 3 public String username; 4 public Date birthday; 5 public String sex; 6 public String address; 7 } 8 public class UserQuery { 9 private String orderByClause; 10 p