加深印象之前端layui按钮绑定事件的方法

最新推荐文章于 2024-06-30 01:25:09 发布

浪里骚气溅淫花

最新推荐文章于 2024-06-30 01:25:09 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 layui 文章标签： layui点击事件监控 layui按钮点击事件监控 layui点击事件

本文链接：https://blog.youkuaiyun.com/qq_38529889/article/details/83541626

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

layui

5 篇文章

订阅专栏

本文详细介绍了在不同版本的layui框架中，如何为前端按钮绑定点击事件。包括2.4.0及以后版本通过table模块添加toolbar的方式，以及老版本需要手动添加监听代码的方法。通过实例演示了监听事件的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加深印象之前端layui按钮绑定事件的方法

1、layui2.4.0+：
在这里插入图片描述
老版本直接按照文档在table模块中添加toolbar,引入模板的方式添加按钮就可实现监听事件。
文档
2、老版layui:
2.4.0前版本的按钮绑定事件不论是active、或者jq选择器绑定的模式必须要加上一段代码：

<html>
...
<div id="test">
	<button class="layui-btn" data-type="search" id="search">搜索</button>
</div>
...

...
var active = {
		search : function() {
		alert(1);
	}
}
...

...
$('#search').on('click', function() {
	alert(2);
});
...

...
//重点在于这段代码，他可以在layui中实现监听点击事件
$('#test').on('click', function() {
	var othis = $(this), type = othis.data('type');
	active[type] ? active[type].call(this, othis) : '';
});
...
</html>

输出结果：2 1
这里还涉及到了执行顺序，弹出2的这段代码放在最下面再去执行，结果就变成了1 2