溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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即可完美實現事件委托。
效果圖如下：
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動態綁定事件的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
