layui动态绑定事件的方法


Posted in Javascript onSeptember 20, 2019

Tips:很多前端新手会遇到动态创建DOM(html片段)的场景,原来的点击事件无法生效。以及成熟的layui框架动态创建DOM(html片段)不知道如何解决,接下来为大家解释其实现的原理,是主要是通过es6的写法。

一、常规动态创建DOM(html片段)

<!--.html代码片段-->
<!--按钮-->
<button class="data-set" type="button">添加</button>
<!--动态创建的位置-->
<div class="setBox" data-uid="setBox"></div>

<!--jQ代码片段-->
 $(function(){//初始化
  var setBox=$('.setBox');//获取动态添加对象
  $('.data-set').on('click',function () {

    var _html3=`
    <div class="info"> <admin:text  value=""     class="timeInterval" /> <span class="del"> 删除</span> </div>
    `;//此处用es6的方式拼接需要动态创建的代码(模板)
    setBox.append(_html3);//append方法将_html3动态添加到setBox内
    //$('.timeInterval').focus();//聚焦(如果是layui框架会有小bug,用户要先失去焦点再点一次才能调用layui方法)
   });

  $('body').on('click','.del',function () {//事件委托,请看下方注释
    $(this).parents('.info').hide();//模拟前端删除按钮
   });
 })

Tips:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。这也是解决动态创建HTML片段点击事件无法生效的原因。body是父级,即DOM本就存在的对象,但是考虑到兼容性,移动端IOS不支持body作为事件绑定的对象,本文的解决方案是将body改为.setBox即可完美实现事件委托。

效果图如下:

layui动态绑定事件的方法

Tips:绿色框内为初始状态,红色框内为点击添加后实现的模型

二、layui动态绑定事件

1.框架的引入和实例化

自行引入layui.css和layui.js,初始化或者实例化laydate,如果没有这些操作可是会报错的哦。

layui.use('laydate', function(){
  var laydate = layui.laydate;
})

2.html代码片段

<b>禁止交易时间点击日历增加</b>
<!--按钮-->
<p class="data-stop">添加</p>
<!--动态创建的位置-->
<div class="stopBox"></div>

tips:此处的p标签为按钮,样式自行修改

3.js代码片段

var stopBox=$('.stopBox');
  var test=0;//定义一个变量,用于动态创建类名
  $('.data-stop').on('click',function () {
   test=test+1;//防止类名重复
   var _html2=`<div class="info"><admin:text value="" len="250" class="stop${test}"/> <span class="del"> 删除</span></div>`;//(关键)此处用es6的方式拼接需要动态创建的代码(模板),若不是es6的写法$(test)无法识别,需要用“+test+”的方式去拼接。
 stopBox.append(_html2);//实现代码片段动态添加
  //(关键)执行一个laydate实例,如果不执行实例化,无法给动态添加的DOM节点绑定方法
  laydate.render({
   elem: '.stop'+test //指定元素,test为变量
  });
  //$('.stop'+test).focus();//建议不使用聚焦,否则用户体验感不佳
 });

  //交易时间删除按钮
  $('body').on('click','.del',function () {
   $(this).parents('.info').hide();//模拟删除
  });

效果图如下:

layui动态绑定事件的方法

layui动态绑定事件的方法

以上这篇layui动态绑定事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 #Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 #Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 #Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 #Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 #Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 #Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 #Javascript
You might like
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
flask框架路由常用定义方式总结
2019/07/23 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
聊聊python中的异常嵌套
2020/09/01 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
《称象》教学反思
2014/04/25 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
财务人员岗位职责
2015/02/03 职场文书
公司管理制度范本
2015/08/03 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
HttpClient实现文件上传功能
2022/08/14 Java/Android