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 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
初识Node.js
Sep 03 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
js实现星星海特效的示例
Sep 28 Javascript
详解Vue router路由
Nov 20 Vue.js
利用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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP静态文件生成类实例
2014/11/29 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
图解js图片轮播效果
2015/12/20 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
python实现线程池的方法
2015/06/30 Python
简单讲解Python中的闭包
2015/08/11 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
浅谈PyTorch中in-place operation的含义
2020/06/27 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
JPA的特点
2014/10/25 面试题
小学教师自我剖析材料
2014/09/29 职场文书
刑事和解协议书范本
2014/11/19 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技