layui button点击事件处理及动态创建绑定测试
测试 绑定 点击 button layui 事件处理 动态创建
2023-09-11 14:15:13 时间
看了网上很多童鞋说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>运行效果：
：