layui中的form表单与button的点击事件冲突

最新推荐文章于 2024-05-14 09:38:54 发布
最新推荐文章于 2024-05-14 09:38:54 发布
阅读量9.4k 收藏
点赞数
分类专栏： html layui 文章标签： layui button click
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_35655786/article/details/79521758
版权

layui的form表单位置和button标签的位置重合，会使得button的click事件得不到响应，如图：


蓝色底为form的位置，“重新搜索”为<button>标签的位置，此时，button标签的click事件无法响应。

必须将form的宽度减小，到不和button标签重合

如下图：


此时按钮正常响应click

sinat_35655786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
layui工具栏按钮监听事件
weixin_44588946的博客
06-09 1万+
layui工具栏按钮监听事件
解决layui中的form表单与button的点击事件冲突问题
10-18
今天小编就为大家分享一篇解决layui中的form表单与button的点击事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 事件监听触发
weixin_33804990的博客
05-05 3658
1：监听select 改变 <!-- 不用form 用div也可以 --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> &lt...
【前端】LayUI监听事件汇总
最新发布
qq_25285531的博客
05-14 605
一、监听单选按钮事件 二、监听下拉框事件
解决layui动态追加的点击事件不起作用问题
SummerGao
08-11 367
//不起作用 $('#dem...
layui 按钮点击事件触发禁用无效
https://ligo100.cn 小何博客欢迎访问。
09-28 2149
文章目录[隐藏] 前言修改前代码-禁用后依然触发点击事件 前言 最近再搞layui表单时，发现提交后我把提交按钮禁用了，依然触发提交事件，找了半天发现是我再写表单时把表单按钮写成 div 了，改为 button 就正常了。 修改前代码-禁用后依然触发点击事件 <div class="layui-btn layui-btn-disabled">提交</div> 修改后代...
layui 解决form表单点击无反应的问题
10-16
今天小编就为大家分享一篇layui 解决form表单点击无反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui实现form表单同时提交数据和文件的代码
10-16
当用户点击“立即注册”按钮（`#get`）时，由于`lay-submit`和`lay-filter`属性的设置，layui的`form`模块会捕获此事件并触发表单提交。此时，表单中的所有数据（包括文本和文件）都将一起发送到服务器。 总的来说...
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
小5聊的博客
03-27 5251
最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。 因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等
layui中实现按钮点击事件
qq_18932003的博客
12-21 7193
首先，小编要告诉大家一个残酷的现实，那就是小编没有找到layui对点击事件的支持… 这里的点击事件是指单纯的点击事件，而不是提交事件，或者是数据表格中内嵌的button，对于这两者，layui是有lay-submit和lay-event这个属性进行支持的，所以这里只能使用最原始的js和jq进行监听点击事件。 第一种，js的监听：//给普通按钮绑定事件 <button class="la...
Layui监听事件
m0_55132979的博客
05-29 1303
Layui表格监听行的单击事件，先点击行获取Id再点击列表数据进行回填 如下图所示,是layui表格监听行的单击事件，这里监听获取到表格数据，点击选中行的数据，根据相对应的Id回填到form表单数据。 我们可以用post请求方式把获取到的Id传送到控制器，在控制器中根据Id查询返回到form表单。 ...
Layui表单事件问题 汇总
张陈军的博客
06-07 980
$('.alert').on('click', function(){ var othis = $(this), method = othis.data('method'); active[method] ? active[method].call(this, othis) }); $(document).on('click','#btn',function(){ layer.msg('hello'); });
关于layui的form里的元素进行动态生成，验证失效解决方法
Quan的博客
09-09 5560
这问题和使用layTpl动态生成页面问题类似，详细进入https://blog.csdn.net/sqlquan/article/details/82432513 form有点不同就是需要把需要执行form.render()而不是element.render()；进行渲染 var data = jsonData; var getTpl = di...
Layui框架form模块的事件监听
chen2745213271的博客
08-18 3066
这次将介绍layui框架里form模块的功能，该功能名为事件监听，事件监听可分为多个不同的事件，分别如下。. 1.监听select选择（如果监听到的select下拉框被选择使用时就会触发该事件） 2.监听checkbox复选（如果监听到的checkbox复选框被选中使用时就会触发该事件） 3.监听switch开关（如果监听到的switch开关按钮被使用时就会触发该事件） 4.监听radio单选（如果监听到的radio单选框被选中使用时就会触发该事件） 5.监听submit提交（如果监听到的表单的按
layui 事件和监听
代码笔记
06-25 3142
layui 事件和监听
layui//添加按钮监听（纯前端数组方式实现）
weixin_52422011的博客
09-01 1444
//添加按钮监听 let on = table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'addData': layer.open({ title: '添加用户', type: 2, .
form表单提交按钮点击事件先触发还是提交数据先触发_【Javascript】DOM 事件
weixin_39948277的博客
11-24 1645
说明HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！(如用户点击按钮)。鼠标事件属性和描述onclick 当用户点击某个对象时调用的事件句柄。oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发ondblclick 当用户双击某个对象时调用的事件句柄。onmousedown 鼠标按...
layui form表单中 input 后加一button点击弹出layer层
05-25
你可以像下面这样写一个表单，其中 input 后面有一个按钮，当按钮被点击时，会弹出一个 layer 层： ``` <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-inline"> <input type="text" name="input" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn layui-btn-normal" type="button" id="btn">弹出层</button> </div> </div> </form> <script> layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; // 监听按钮点击事件 $('#btn').on('click', function(){ layer.open({ title: '弹出层', content: '这是一个弹出层' }); }); }); </script> ``` 在上面的代码中，我们使用了 layui.form 和 layui.layer 这两个模块。当页面加载完成后，我们通过 `layui.use` 方法来加载这两个模块。 接着，我们在按钮的点击事件中使用 `layer.open` 来弹出一个层。在 `layer.open` 的配置参数中，我们可以设置标题和内容，这里我们简单地设置了一个标题和一段文字作为内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值