Layuilayui实际应用中批量button点击事件的正确添加及处理方式
Posted 厦门德仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layuilayui实际应用中批量button点击事件的正确添加及处理方式相关的知识，希望对你有一定的参考价值。
给出两种批量按钮事件添加及处理方法
btnAction.html
<!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">新增Tab项</button>
<button class="layui-btn" id="edit">编辑</button>
<button class="layui-btn" id="save">保存</button>
<button class="layui-btn" id="back" >返回</button>
<!-- layui两种js引用方法，一种是模块和回调函数单独放在外部js文件下
第二种是直接写在 js代码中,建议单独用文件存放js，方便业务分离
-->
<!--外部js文件 -->
<script src="res/js/btnAction.js"></script>
</body>
</html>
btnAction.js
layui.use(['jquery','layer','element'], function()
var $ = layui.$,
layer = layui.layer,
element = layui.element;
//用case语法动态添加按钮处理事件
// $(".layui-btn").click(function()
// var id = $(this).attr('id');
// //alert(id);
// switch(id)
// case "add":layer.msg(id);break;
// case "edit":layer.msg(id);break;
// case "save":layer.msg(id);break;
// case "back":layer.msg(id);break;
//
// //还可以通过id获取innerText判断，jQuery不支持innerText
// //var s = document.getElementById(id).innerText;
// //alert(s);
// );
//用if语法动态添加按钮处理事件
$(".layui-btn").click(function()
var id = $(this).attr('id');
if(id == "add")
layer.msg(id);
else if (id == "edit")
layer.msg(id);
else if (id == "save")
layer.msg(id);
else if (id == "back")
layer.msg(id);
);
)
以上是关于Layuilayui实际应用中批量button点击事件的正确添加及处理方式的主要内容，如果未能解决你的问题，请参考以下文章
Layuilayui中iframe子页面中的链接点击后在父页面中动态添加tab选项