layui動態(tài)綁定事件的方法

更新時間：2019年09月20日 08:41:50 作者：吳維煒

今天小編就為大家分享一篇layui動態(tài)綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Tips:很多前端新手會遇到動態(tài)創(chuàng)建DOM（html片段）的場景，原來的點擊事件無法生效。以及成熟的layui框架動態(tài)創(chuàng)建DOM（html片段）不知道如何解決，接下來為大家解釋其實現(xiàn)的原理，是主要是通過es6的寫法。

一、常規(guī)動態(tài)創(chuàng)建DOM（html片段）

<!--.html代碼片段-->
<!--按鈕-->
<button class="data-set" type="button">添加</button>
<!--動態(tài)創(chuàng)建的位置-->
<div class="setBox" data-uid="setBox"></div>

<!--jQ代碼片段-->
 $(function(){//初始化
  var setBox=$('.setBox');//獲取動態(tài)添加對象
  $('.data-set').on('click',function () {

    var _html3=`
    <div class="info"> <admin:text  value=""     class="timeInterval" /> <span class="del"> 刪除</span> </div>
    `;//此處用es6的方式拼接需要動態(tài)創(chuàng)建的代碼(模板)
    setBox.append(_html3);//append方法將_html3動態(tài)添加到setBox內(nèi)
    //$('.timeInterval').focus();//聚焦（如果是layui框架會有小bug，用戶要先失去焦點再點一次才能調(diào)用layui方法）
   });

  $('body').on('click','.del',function () {//事件委托，請看下方注釋
    $(this).parents('.info').hide();//模擬前端刪除按鈕
   });
 })

Tips：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。這也是解決動態(tài)創(chuàng)建HTML片段點擊事件無法生效的原因。body是父級，即DOM本就存在的對象，但是考慮到兼容性，移動端IOS不支持body作為事件綁定的對象，本文的解決方案是將body改為.setBox即可完美實現(xiàn)事件委托。

效果圖如下：

Tips:綠色框內(nèi)為初始狀態(tài)，紅色框內(nèi)為點擊添加后實現(xiàn)的模型

二、layui動態(tài)綁定事件

1.框架的引入和實例化

自行引入layui.css和layui.js,初始化或者實例化laydate，如果沒有這些操作可是會報錯的哦。

layui.use('laydate', function(){
  var laydate = layui.laydate;
})

2.html代碼片段

<b>禁止交易時間點擊日歷增加</b>
<!--按鈕-->
<p class="data-stop">添加</p>
<!--動態(tài)創(chuàng)建的位置-->
<div class="stopBox"></div>

tips:此處的p標(biāo)簽為按鈕，樣式自行修改

3.js代碼片段

var stopBox=$('.stopBox');
  var test=0;//定義一個變量，用于動態(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的方式拼接需要動態(tài)創(chuàng)建的代碼(模板)，若不是es6的寫法$(test)無法識別，需要用“+test+”的方式去拼接。
 stopBox.append(_html2);//實現(xiàn)代碼片段動態(tài)添加
  //（關(guān)鍵）執(zhí)行一個laydate實例，如果不執(zhí)行實例化，無法給動態(tài)添加的DOM節(jié)點綁定方法
  laydate.render({
   elem: '.stop'+test //指定元素，test為變量
  });
  //$('.stop'+test).focus();//建議不使用聚焦，否則用戶體驗感不佳
 });

  //交易時間刪除按鈕
  $('body').on('click','.del',function () {
   $(this).parents('.info').hide();//模擬刪除
  });

效果圖如下：