layui 实现button click点击事件

最新推荐文章于 2025-05-09 13:56:05 发布

原创最新推荐文章于 2025-05-09 13:56:05 发布 · 9.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #jquery

LayUI的学习与使用专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用layui框架的示例，展示了如何通过class选择器为按钮绑定点击事件，并定义了编辑、保存和返回三个功能对应的事件处理器。此示例适用于前端开发人员，特别是那些使用layui进行UI组件操作的人。

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

HTML部分

<button class="layui-btn layuiadmin-btn-comm layui-btn-sm" data-type="edit">编辑</button>

<button class="layui-btn layuiadmin-btn-comm layui-btn-sm" data-type="save">保存</button>

<button class="layui-btn layuiadmin-btn-comm layui-btn-sm" data-type="back">返回</button>

javascript部分



//绑定点击事件

//通过class 筛选
$('.layui-btn.layuiadmin-btn-comm').on('click', function(){
   var type = $(this).data('type');
   active[type] ? active[type].call(this) : '';
});

//点击事件
 var active = {
     //编辑
     edit: function(){
         editVo(teamObj);
     }
     //保存
     ,save: function(){
       debugger
     },
     //返回否
     back:function(){

     }
 }