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>
运行效果:
:
本文来自博客园,作者:IT情深,转载请注明原文链接:https://www.cnblogs.com/wh445306/p/16751768.html