动态绑定事件的方法

Tips:很多前端新手都会遇到动态创建DOM(html片段)的场景，原有的点击事件无法生效。而且不知道如何用成熟的layui框架解决动态创建DOM(html片段)的问题。接下来，我将主要通过es6编写来解释其实现原理。

1.常规和动态地创建DOM(html片段)

！- .html代码片段-！-button-button class=' data-set ' type=' button ' add/button！-动态创建的位置-div class=' setbox ' data-uid=' setbox '/div！- jQ代码片段-$(function(){//initialize var setBox=$(')。setBox’)；//获取动态添加的对象$()。数据集')。on ('click '，function(){ var _ html 3=` div class=' info ' admin : text value=' ' class=' time interval '/span class=' del ' delete/span/div `；//这里，使用es6对需要动态创建的代码(模板)setBox.append(_html3)进行拼接；//append方法将_html3动态添加到setBox //$('。时间间隔')。焦点()；//焦点(如果layui框架有小bug，用户在调用layui方法之前必须失去焦点，再次点击)}；$(“body”)。打开('点击'，'。del '，function () {//event delegate，请参见下面的note $(this)。父母('。信息')。hide()；//模拟前端删除按钮})；})提示：事件委托就是使用事件冒泡，并且只指定一个事件处理程序来管理某一类型的所有事件。这也是动态创建HTML片段点击事件无法生效的原因。Body是父对象，也就是DOM的对象。但是考虑到兼容性，移动终端上的IOS不支持将body作为事件绑定的对象。本文的解决方案是将正文改为。setBox来完美地实现事件委托。

效果图如下：

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

第二，layui动态绑定事件

1.框架的介绍和实例化

自己介绍layui.css和layui.js，初始化或者实例化laydate，但是没有这些操作，就会报错。

layui.use('laydate '，function(){ var lay date=layui . lay date；})2.html代码片段

禁止点击日历添加交易时间！-button-p class=' data-stop ' add/p！-动态创建的位置-div class=' stop box '/div tips :这里的p标签是一个按钮，样式是自己修改的

3.js代码片段

var stopBox=$('。stop box’)；var测试=0；//定义一个变量，用于动态创建类名$()。数据停止')。on ('click '，function(){ test=test 1；//防止类名重复var _ html 2=` div class=' info ' admin : text value=' ' len=' 250 ' class=' stop $ { test } '/span class=' del ' delete/span/div `；//(key)这里，要动态创建的代码(模板)由es6拼接。如果es6不识别，需要通过“测试”进行拼接。stop box . append(_ html 2)；//实现代码片段的动态添加//(key)执行laydate实例。如果不执行实例化，则动态添加的DOM节点无法与laydate . render({ elem : })方法绑定。stop ' test//指定一个元素，test是一个变量})；//$('.“停止”测试)。焦点()；//建议不要使用对焦，否则用户体验不好})；//事务时间删除按钮$ ('body ')。打开('点击'，'。del '，function () {$ (this)。父母('。信息')。hide()；//模拟删除})；效果图如下：

以上由layui动态绑定事件的方法是边肖分享的全部内容，希望能给大家一个参考和支持。