layui button点击事件处理及动态创建绑定测试

看了网上很多童鞋说layui button元素没有onclick 点击事件，今天测试了一下，发现没问题。

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <script src="res/layui/layui.js"></script>
</head>
<body>
 
<button class="layui-btn" id="add" onclick="getBtnText(this);">新增</button>
<button class="layui-btn" id="edit" onclick="getBtnText(this);">编辑</button>
<button class="layui-btn" id="save" onclick="getBtnText(this);">保存</button>
<button class="layui-btn" id="withExport" onclick="getBtnText(this);">导出</button>
<button class="layui-btn" id="back" onclick="getBtnText(this);">返回</button>
 
<script type="text/javascript">
	function getBtnText(element) {
		var s = document.getElementById(element.id).innerText;
		alert(s);
	}	
</script>
</body>
</html>

如果是动态新增的元素，则可以用document动态绑定的方法

代码

 --按钮add
<button class="layui-btn site-demo-active" id="add" >新增Tab项</button>
 
 
--js
<script>
  // 模块和回调函数
 layui.use(['jquery','layer','element'], function(){
	var $ = layui.$,
	    layer = layui.layer,
	    element = layui.element;
 
	$(document).on('click',"#add",function(){
        layer.msg("按钮点击");
    });
 })
</script>

运行效果：

：

posted @ 2022-10-04 00:14 IT情深阅读(2171) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· layui实际应用中批量button点击事件的正确添加及处理方式

· layui select的使用及解决根据text找value遇到的bug

· layui之给checkbox添加点击事件

· jQuery绑定动态元素的点击事件无效

· element UI——button添加事件

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

愿有岁月可回首，且以深情待白头

芝兰生于深林，不以无人而不芳。

昵称： IT情深
园龄： 2年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案 (294)

2022年10月(294)

阅读排行榜

评论排行榜

1. 关于fastjson,gson,jackson的一个反序列化简单对比(1)

wh445306

layui button点击事件处理及动态创建绑定测试

公告

搜索

常用链接

最新随笔

积分与排名

随笔档案 (294)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="res/layui/css/layui.css">
	<script src="res/layui/layui.js"></script>
	</head>
	<body>

	<button class="layui-btn" id="add" onclick="getBtnText(this);">新增</button>
	<button class="layui-btn" id="edit" onclick="getBtnText(this);">编辑</button>
	<button class="layui-btn" id="save" onclick="getBtnText(this);">保存</button>
	<button class="layui-btn" id="withExport" onclick="getBtnText(this);">导出</button>
	<button class="layui-btn" id="back" onclick="getBtnText(this);">返回</button>

	<script type="text/javascript">
	function getBtnText(element) {
	var s = document.getElementById(element.id).innerText;
	alert(s);
	}
	</script>
	</body>
	</html>

	--按钮add
	<button class="layui-btn site-demo-active" id="add" >新增Tab项</button>


	--js
	<script>
	// 模块和回调函数
	layui.use(['jquery','layer','element'], function(){
	var $ = layui.$,
	layer = layui.layer,
	element = layui.element;

	$(document).on('click',"#add",function(){
	layer.msg("按钮点击");
	});
	})
	</script>