Layui---输入事件

输入实时监听 

//监听表单单选框复选框选择
form.on('radio', function (data) {console.log(data.value); //得到被选中的值
});//监听表单下拉菜单选择form.on('select', function (data) //监听表单下拉菜单选择form.on('select', function (data) 
​
//监听表单复选框选择form.on('checkbox', function (data)//监听表格复选框选择
table.on('checkbox(demo)', //layui监听input内容变动简单粗暴
$(function(){//输入框的值改变时触发$("#inputid").on("input",function(e){//获取input输入的值console.log(e.delegateTarget.value);})
})//点击触发监听
$(document).on('click','.class',function(othis){var data = othis.currentTarget;data.remove();layer.msg('清除成功');
}); //带注释
form.on('event(过滤器值)', callback);//监听checkbox复选
form.on('checkbox(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //是否被选中,true或者falseconsole.log(data.value); //复选框value值,也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象
});//监听switch复选
form.on('switch(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //开关是否开启,true或者falseconsole.log(data.value); //开关value值,也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象
}); //监听radio单选:
form.on('radio(filter)', function(data){console.log(data.elem); //得到radio原始DOM对象console.log(data.elem.dataset);//获取dataset参数console.log(data.value); //被点击的radio的value值
});//监听submit提交:
<button lay-submit lay-filter="*">提交</button>
form.on('submit(*)', function(data){console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

输入选择后事件

//监听模具分摊单位的输入框变化(输入后)$('#apportion_unit').blur(function(event) {var apportionUnit = $(this).val();$('#total_quantity').text(apportionUnit);//赋值});

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从0开始的STM32HAL库学习9

定时器输入捕获测频率 生成待测信号 配置环境 选择如上图所示 代码修改 在main函数中加入 HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1); 测量信号频率 配置环境 如图所示打开TIM3定时器 1. 设置TI1FP1为ResetMode,即清空计数 2. 使用内部时钟 3. 通道 1 设置为输…

日本的便利店真的“无所不能”?!简直不要太方便了

众所周知&#xff0c;日本便利店可谓是日本人离不来的存在了&#xff01;真真是“要啥有啥”&#xff0c;可以说日本的便利店才是真正意义上的“便利”~ 那日本的便利店到底有什么与众不同呢&#xff1f;&#xff1f;今天小编来带大家盘点一下日本便利店的那些服务。 一、购票…

Python学习计划——5.2继承、多态和封装

面向对象编程的三个重要概念是继承、多态和封装。它们使得代码更具可重用性、灵活性和安全性。以下是详细的讲解和Python案例。 1. 继承 继承允许一个类&#xff08;子类&#xff09;从另一个类&#xff08;父类&#xff09;继承属性和方法。通过继承&#xff0c;子类可以复用…

《2024新质生产力引领下十大重点产业趋势解读--大模型篇》,深剖当下爆火的大模型产业!

01 报告导读 “新质生产力”重要性再提升。 近日&#xff0c;作为热词的“新质生产力”再度被多次提及&#xff0c;“新质生产力”这一概念近年来在经济和社会发展中被频繁提及&#xff0c;它指的是通过创新驱动&#xff0c;利用新技术、新业态、新模式推动生产力发展的新形态…

深入解析Memcached:C#中的应用与实战案例

目录 Memcached简介Memcached的特点Memcached的工作原理Memcached的应用场景Memcached的安装和配置Memcached与C#的集成 引入依赖配置Memcached客户端C#代码示例 存储数据读取数据删除数据深入解析Memcached 数据存储和过期策略分布式架构性能优化实战案例 缓存数据库查询结果实…

opencascade AIS_MouseGesture AIS_MultipleConnectedInteractive源码学习

AIS_MouseGesture //! 鼠标手势 - 同一时刻只能激活一个。 enum AIS_MouseGesture { AIS_MouseGesture_NONE, //!< 无激活手势 // AIS_MouseGesture_SelectRectangle, //!< 矩形选择&#xff1b; //! 按下按钮开始&#xff0c;移动鼠标定义矩形&…

CSP-J12023入门级第一轮错题

CSP-J12023入门级第一轮 假设有一个链表的节点定义如下&#xff1a; struct Node {int data;Node* next; };现在有一个指向链表头部的指针&#xff1a;Node* head。如果想要在链表中插入一个新节点&#xff0c;其成员data的值为42&#xff0c;并使新节点成为链表的第一个节点&…

SQL语句补充与示例

在工作中对一些sql感觉陌生&#xff0c;补充一下学习。 SQL语句补充与示例 SQL&#xff08;Structured Query Language&#xff0c;结构化查询语言&#xff09;是一种用于管理和操作关系数据库的标准编程语言。SQL 语句用于执行各种数据库操作&#xff0c;包括查询、更新、插…

【Linux】玩转操作系统,深入刨析进程状态与调度机制

目录 1. 进程排队2. 进程状态的表述2.1. 进程状态2.2 运行状态2.3. 阻塞状态2.4. 挂起状态 3. Linux下具体的进程状态3.1. 运行状态R3.2. 可中断睡眠状态S3.3. 不可中断睡眠状态D3.4. 停止状态T3.5. 死亡状态X3.6. 僵尸状态Z 4. 孤儿进程5. 优先级6. Linux的调度与切换6.1. 四个…

基于STM32设计的老人摔倒检测系统(4G+华为云IOT)(193)

文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】整体构架【3】上位机开发思路【4】供电方式1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献【4】课题研究的意义【5】国内外技术发展现状【6】课题研究思…

在linux上面用drissionpage自动化遇到反爬?

目录 一、反爬内容1、案例12、案例2 二、后来发现的问题解决 一、反爬内容 1、案例1 反爬的响应文本返回如下&#xff1a;爬虫均能精准识别,测试链接:https://ziyuan.baidu.com/crawltools/index)非正常爬虫访问时:返回的压缩报文内容无法直接识别,可一定程度上保护站点信息安…

C语言进阶——一文带你深入了解“C语言关键字”(中篇)

本篇文章属于C语言进阶篇的“C语言关键字”&#xff0c;旨在分享我对C语言关键字的深度学习和了解。同时带领大家深入浅出的走进C语言进阶知识——关键字篇&#xff01; 目录 一、变量的命名规则 二、标识符的命名规则 一、变量的命名规则 1、命名应当直观且可以拼读&#x…

【YashanDB知识库】yasdb jdbc驱动集成BeetISQL中间件,业务(java)报autoAssignKey failure异常

问题现象 BeetISQL中间件版本&#xff1a;2.13.8.RELEASE 客户在调用BeetISQL提供的api向yashandb的表中执行batch insert并将返回sequence设置到传入的java bean时&#xff0c;报如下异常&#xff1a; 问题的风险及影响 影响业务流程正常执行&#xff0c;无法获得batch ins…

数据库中单表的查询(select)

单表查询 所有的查找都会得到一张虚拟表 一、 最简单的查询 SELECT 123; SELECT asd; SELECT 11;二、 从表中获取数据 select 字段名,字段名 from 表名 2.1 全字段查询 SELECT sid,sname,birthday,ssex,classid FROM student; SELECT * FROM student; -- 使用*不利于s…

史诗级动态分屏多画面PR开场视频模板MOGRT

Premiere Pro模板&#xff0c;创意史诗级动态分屏多画面开场视频模板mogrt 主要特点 全高清&#xff08;19201080&#xff09;分辨率 Pr2021或更高版本软件 非常易于定制 00:33秒持续时间 7个文本占位符 34个媒体占位符 https://prmuban.com/39328.html

【论文共读】【翻译】【GPT】Improving Language Understanding by Generative Pre-Training

GPT 原论文地址 翻译&#xff1a; Improving Language Understanding by Generative Pre-Training 通过生成式预训练提高语言理解能力 0. 摘要 自然语言理解包括各种不同的任务&#xff0c;例如文本蕴涵、问答、语义相似性评估和文档分类。尽管大量未标记的文本语料库很丰富…

数据结构:线性表的应用

文章目录 1.线性表的合并2.有序表的合并 1.线性表的合并 问题描述&#xff1a; 假设利用两个线性表La和Lb分别表示两个集合A和B,现要求一个新的集合AAUB La(7,5,3,11)Lb(2,6,3)->La(7,5,3,11,2,6) 算法步骤 依次取出Lb中的每个元素&#xff0c;执行以下操作&#xff1a; 在…

基于 uPlot.js 的分段彩色条形图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于 uPlot.js 的分段彩色条形图 应用场景 分段彩色条形图广泛应用于数据可视化领域&#xff0c;用于展示数据的分布和趋势。它可以通过不同的颜色来表示数据的不同范围&#xff0c;帮助用户快速识别和理解数…

苹果手机微信拉黑了怎么恢复?简单3招,找回好友!

我们平时在使用微信和朋友交往的过程中&#xff0c;难免会产生一些摩擦&#xff0c;有时候我们可能因为一时冲动或误会而误将好友拉入黑名单。但当冷静下来&#xff0c;想要找回那份友谊时&#xff0c;该怎么办呢&#xff1f;别急&#xff0c;这里有3招简单又实用的方法&#x…

React间的组件通信

一、父传子&#xff08;props&#xff09; 步骤 父组件传递数据&#xff0c;子组件标签身上绑定属性子组件接收数据&#xff0c;props的参数 // 子组件 function Son(props) {return (<div>this is Son, {props.name}</div>) }// 父组件 function App() {const n…