Layui前端框架中的Button添加Click事件

  引言

  button点击事件有一个type属性,默认type是submit,有时候使用默认会出现页面自动刷新问题。

<button class="btn btn-primary"  id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>

  Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。这样造成了页面自动刷新。

<button class="btn btn-primary"  type="button" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>

  原因分析:

button,input type=button按钮在IE和w3c,firefox浏览器区别:

当在IE浏览器下面时,button标签按钮,input标签type属性为button的按钮是一样的功能,不会对表单进行任何操作。

但是在W3C浏览器,如Firefox下就需要注意了,button标签按钮会提交表单,而input标签type属性为button不会对表单进行任何操作。

  方法一:将button标签更换为input

<input class="layui-btn test" >test</input>

  方法二:

<button type="button" class="layui-btn test" >test</button>

  现在程序最好兼容各个主流浏览器,故请始终为按钮规定 type 属性。

   知道了button有两种类型后,我们来看具体使用。

  第一种点击事件场景(动态元素)

  这种场景适合于动态创建元素后,点击事件。

  这里的点击事件是指单纯的点击事件,而不是提交事件,或者是数据表格中内嵌的button,对于这两者,layui是有lay-submit和lay-event这个属性进行支持的,所以这里只能使用最原始的js和jq进行监听点击事件。 layui中button点击事件,分两种:

  第一种,js的监听:

<button class="layui-icon layui-icon-export" id="withExport"></button>

  回调函数:

$(document).on('click',"#withExport",function(){
        layer.msg("按钮点击");
 });

  第二种button绑定事件(静态和动态)

  第二种,jQuery的监听:

<button class="layui-icon layui-icon-export" id="withExport"></button>

$("#withExport").click(function(){
	layer.msg("点击事件");
});

  这种适合页面加载时就存在的元素。

  关于button绑定事件可以总结出以下三种,1和3是静态和动态的区别。

HTML中为button绑定事件的方式有三种。

例如以下标签:

<button type="submit" id="btn_submit"> submit </button>

一、使用jQuery进行绑定

$('#btn_submit').click(function(){

});

# 这种是无法在动态创建元素的时候使用。

二、使用原生js绑定

document.getElementById("#btn_submit").addEventListener(‘click’, function(){

}, false);



三、直接在button标签中使用onclick绑定

<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>
此时,type="button"也可以。 然后在<script>标签中定义btnAtion的方法 <script> function btnAction() { } </script>  

比较:

1、使用jquery绑定,代码简洁,使用方便,事件绑定方式为追加绑定,即绑定多少个方法就执行多少个方法。

在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为

速度的瓶颈,除非页面上绑定事件的元素超过上万个,否则响应速度就不必纠结了,只做个事件绑定还是很快的。

所以在做负载等要求不那么严格的“小程序”,从维护的角度上,建议用jQuery绑定,简单清楚,最容易维护。

2、使用原生js,代码量稍大,事件绑定方式为复写绑定,即绑定多个只保留最后一个绑定的方法。

原生js,这是真正的熟练者的工具,如果能写明白更好。

3、使用onclick标签绑定,代码量不大,但是html前端和js前端混在一起,不易于维护。

原则上HTML代码只能体现网页的结构,具体的行为应该使用JavaScript代码进行绑定。

如果在HTML中用onclick事件混杂js,会导致html前端和js前端的工作混在了一起,难以分离工作任务,

进而难以维护。这种做法临时调试可以,但如果正式成品中不应该出现,

所以不建议使用onclick标签方式进行绑定事件。

  备注:如果说是动态创建的元素,那么只能使用第三种,如果是页面加载时就存在的元素,可以使用第一种。

  总结

  在web开发中,对按钮的操作事件比较频繁,搞清楚使用方法,才能更好的解决实际需求。 另外,欢迎加入学习沟通群~

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是使用layui实现搜索功能的一般步骤: 1. 在HTML页面添加一个搜索框和一个搜索按钮。 ```html <div class="layui-input-inline"> <input type="text" name="keyword" placeholder="请输入关键字" class="layui-input"> </div> <div class="layui-input-inline"> <button class="layui-btn layui-btn-normal" id="searchBtn">搜索</button> </div> ``` 2. 在JavaScript文件编写搜索功能的代码。可以通过Ajax异步获取后端返回的相关数据。 ```javascript layui.use(['form', 'table'], function(){ var form = layui.form; var table = layui.table; // 监听搜索按钮的点击事件 $('#searchBtn').on('click', function(){ var keyword = $('input[name="keyword"]').val(); // 通过Ajax异步获取数据 $.ajax({ url: '/search', type: 'GET', data: { keyword: keyword }, dataType: 'json', success: function(res){ // 渲染表格 table.render({ elem: '#resultTable', cols: [[ { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, { field: 'gender', title: '性别' }, { field: 'address', title: '地址' } ]], data: res.data }); }, error: function(err){ console.log(err); } }); }); }); ``` 3. 在后端编写一个接口,用于接收前端发送的搜索请求,并返回相关数据。 ```python from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/search', methods=['GET']) def search(): keyword = request.args.get('keyword') # 根据关键字从数据库查询相关数据 data = [ {'name': '张三', 'age': 20, 'gender': '男', 'address': '北京市'}, {'name': '李四', 'age': 25, 'gender': '女', 'address': '上海市'} ] return jsonify({'code': 0, 'msg': 'success', 'data': data}) if __name__ == '__main__': app.run(debug=True) ``` 以上就是使用layui前端框架实现搜索功能的一般步骤。需要注意的是,代码仅供参考,具体实现方式可能会根据实际情况有所不同。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值