在layui中按钮绑定点击事件

本文介绍如何利用LayUI框架实现商品发布功能,包括导入必要的CSS和JS文件,编写HTML结构,并通过JavaScript控制商品发布弹窗及数据提交等关键步骤。

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

1.导入css样式

  <link rel="stylesheet" href="https://www.3ftc.com/theme/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="https://www.3ftc.com/theme/sys/style/admin.css" media="all">

2.导入js

  <script src="https://www.3ftc.com/theme/layui/layui.js"></script>  

3.html

    <button class="layui-btn layuiadmin-btn-forum-list" data-type="add">发布商品</button>

4.js

layui.config({
    base: 'https://www.3ftc.com/theme/sys/js/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,upload = layui.upload;

  
		//事件
    var active = {   
      add: function(){
        layer.open({
           type: 2    // 0:信息框,默认 1:页面层 2:iframe层 3:加载层 4:tips层
          ,title: '添加商品'
          ,content: '${ROOT}/sys/goods/form'
          ,maxmin: false
          ,area: ['800px', '550px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
            ,submitID = 'LAY-food-submit'
            ,submit = layero.find('iframe').contents().find('#'+ submitID);
            //监听提交
            iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
            	var c = iframeWindow.layui.layedit.getContent(index);
            	data.field.remark = c;
              var field = data.field; //获取提交的字段
              $.ajax({
                  url:"${ROOT}/sys/goods/save",
                  data:field,
                  type:'post',
                  dataType:'json',
                  success:function(json) {
                      if(json.code == 0) {
                    	  layer.msg(json.msg, { icon: 1, time: 2000 });
	        				$(".layui.table").not('.header').parents('tr').next().remove();
	        				setTimeout(function () {
	        					window.location.href = "${ROOT}/sys/goods/list";
	                        }, 1500);
			              layer.close(index); //关闭弹层
                      } else {
                          layer.msg(json.msg);
                      }
                  }
              });
            });  
            
            submit.trigger('click');
          }
        }); 
      },
     
    };
	
	
	
	 $('.layui-btn').on('click', function () {   
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
  });
  
  
    
  });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值