您好,登錄后才能下訂單哦!
Tips:很多前端新手會(huì)遇到動(dòng)態(tài)創(chuàng)建DOM(html片段)的場(chǎng)景,原來(lái)的點(diǎn)擊事件無(wú)法生效。以及成熟的layui框架動(dòng)態(tài)創(chuàng)建DOM(html片段)不知道如何解決,接下來(lái)為大家解釋其實(shí)現(xiàn)的原理,是主要是通過(guò)es6的寫(xiě)法。
一、常規(guī)動(dòng)態(tài)創(chuàng)建DOM(html片段)
<!--.html代碼片段--> <!--按鈕--> <button class="data-set" type="button">添加</button> <!--動(dòng)態(tài)創(chuàng)建的位置--> <div class="setBox" data-uid="setBox"></div> <!--jQ代碼片段--> $(function(){//初始化 var setBox=$('.setBox');//獲取動(dòng)態(tài)添加對(duì)象 $('.data-set').on('click',function () { var _html3=` <div class="info"> <admin:text value="" class="timeInterval" /> <span class="del"> 刪除</span> </div> `;//此處用es6的方式拼接需要?jiǎng)討B(tài)創(chuàng)建的代碼(模板) setBox.append(_html3);//append方法將_html3動(dòng)態(tài)添加到setBox內(nèi) //$('.timeInterval').focus();//聚焦(如果是layui框架會(huì)有小bug,用戶要先失去焦點(diǎn)再點(diǎn)一次才能調(diào)用layui方法) }); $('body').on('click','.del',function () {//事件委托,請(qǐng)看下方注釋 $(this).parents('.info').hide();//模擬前端刪除按鈕 }); })
Tips:事件委托就是利用事件冒泡,只指定一個(gè)事件處理程序,就可以管理某一類型的所有事件。這也是解決動(dòng)態(tài)創(chuàng)建HTML片段點(diǎn)擊事件無(wú)法生效的原因。body是父級(jí),即DOM本就存在的對(duì)象,但是考慮到兼容性,移動(dòng)端IOS不支持body作為事件綁定的對(duì)象,本文的解決方案是將body改為.setBox即可完美實(shí)現(xiàn)事件委托。
效果圖如下:
Tips:綠色框內(nèi)為初始狀態(tài),紅色框內(nèi)為點(diǎn)擊添加后實(shí)現(xiàn)的模型
二、layui動(dòng)態(tài)綁定事件
1.框架的引入和實(shí)例化
自行引入layui.css和layui.js,初始化或者實(shí)例化laydate,如果沒(méi)有這些操作可是會(huì)報(bào)錯(cuò)的哦。
layui.use('laydate', function(){ var laydate = layui.laydate; })
2.html代碼片段
<b>禁止交易時(shí)間點(diǎn)擊日歷增加</b> <!--按鈕--> <p class="data-stop">添加</p> <!--動(dòng)態(tài)創(chuàng)建的位置--> <div class="stopBox"></div>
tips:此處的p標(biāo)簽為按鈕,樣式自行修改
3.js代碼片段
var stopBox=$('.stopBox'); var test=0;//定義一個(gè)變量,用于動(dòng)態(tài)創(chuàng)建類名 $('.data-stop').on('click',function () { test=test+1;//防止類名重復(fù) var _html2=`<div class="info"><admin:text value="" len="250" class="stop${test}"/> <span class="del"> 刪除</span></div>`;//(關(guān)鍵)此處用es6的方式拼接需要?jiǎng)討B(tài)創(chuàng)建的代碼(模板),若不是es6的寫(xiě)法$(test)無(wú)法識(shí)別,需要用“+test+”的方式去拼接。 stopBox.append(_html2);//實(shí)現(xiàn)代碼片段動(dòng)態(tài)添加 //(關(guān)鍵)執(zhí)行一個(gè)laydate實(shí)例,如果不執(zhí)行實(shí)例化,無(wú)法給動(dòng)態(tài)添加的DOM節(jié)點(diǎn)綁定方法 laydate.render({ elem: '.stop'+test //指定元素,test為變量 }); //$('.stop'+test).focus();//建議不使用聚焦,否則用戶體驗(yàn)感不佳 }); //交易時(shí)間刪除按鈕 $('body').on('click','.del',function () { $(this).parents('.info').hide();//模擬刪除 });
效果圖如下:
以上這篇layui動(dòng)態(tài)綁定事件的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。