layui button点击事件处理及动态创建绑定测试

亦凉 2023-10-05 13:12 40阅读 0赞

看了网上很多童鞋说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>

运行效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70 1][]：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201105183613864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201105183702984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2,size_16,color_FFFFFF,t_70