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中连接操作Oracle数据库实例
Apr 02 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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学习之字符串比较和查找
2011/04/17 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python3简单实现微信爬虫
2015/04/09 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python和ruby,我选谁?
2017/09/13 Python
Python打印输出数组中全部元素
2018/03/13 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
肖申克救赎观后感
2015/06/02 职场文书
辩论会主持词
2015/07/03 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书