亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2019年09月20日 08:41:50   作者:吳維煒  
今天小編就為大家分享一篇layui動(dòng)態(tài)綁定事件的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧

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

一、常規(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)添加對象
  $('.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框架會有小bug,用戶要先失去焦點(diǎn)再點(diǎn)一次才能調(diào)用layui方法)
   });

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

Tips:事件委托就是利用事件冒泡,只指定一個(gè)事件處理程序,就可以管理某一類型的所有事件。這也是解決動(dòng)態(tài)創(chuàng)建HTML片段點(diǎn)擊事件無法生效的原因。body是父級,即DOM本就存在的對象,但是考慮到兼容性,移動(dòng)端IOS不支持body作為事件綁定的對象,本文的解決方案是將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,如果沒有這些操作可是會報(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的寫法$(test)無法識別,需要用“+test+”的方式去拼接。
 stopBox.append(_html2);//實(shí)現(xiàn)代碼片段動(dòng)態(tài)添加
  //(關(guān)鍵)執(zhí)行一個(gè)laydate實(shí)例,如果不執(zhí)行實(shí)例化,無法給動(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)綁定事件的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

  • javascript實(shí)現(xiàn)頁面的實(shí)時(shí)時(shí)鐘顯示示例

    javascript實(shí)現(xiàn)頁面的實(shí)時(shí)時(shí)鐘顯示示例

    這篇文章主要介紹了javascript實(shí)現(xiàn)頁面的實(shí)時(shí)時(shí)鐘顯示示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)

    js實(shí)現(xiàn)ctrl+v粘貼上傳圖片(兼容chrome、firefox、ie11)

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ctrl+v粘貼上傳圖片,兼容chrome,firefox,ie11,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-03-03
  • javascript 獲取url參數(shù)和script標(biāo)簽中獲取url參數(shù)函數(shù)代碼

    javascript 獲取url參數(shù)和script標(biāo)簽中獲取url參數(shù)函數(shù)代碼

    不要在方法中調(diào)用方法,否則可能始終獲取的是最后一個(gè)js的文件的參數(shù),要在方法中使用,請先用變量保存,在方法中直接獲取
    2010-01-01
  • 淺談高大上的微信小程序中渲染html內(nèi)容—技術(shù)分享

    淺談高大上的微信小程序中渲染html內(nèi)容—技術(shù)分享

    大部分Web應(yīng)用的富文本內(nèi)容都是以HTML字符串的形式存儲的,那么在微信小程序中,應(yīng)當(dāng)如何渲染這部分內(nèi)容呢?感興趣的小伙伴們可以參考一下
    2018-10-10
  • js原生輪播圖插件制作

    js原生輪播圖插件制作

    這篇文章主要為大家詳細(xì)介紹了js原生輪播圖插件制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法

    在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法

    文章介紹兩個(gè)方法和種是利用javascript onFocus onBlur來判斷焦點(diǎn)和失去焦點(diǎn),加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來實(shí)現(xiàn),有需要的朋友可以參考一下
    2012-12-12
  • easyUI實(shí)現(xiàn)(alert)提示框自動(dòng)關(guān)閉的實(shí)例代碼

    easyUI實(shí)現(xiàn)(alert)提示框自動(dòng)關(guān)閉的實(shí)例代碼

    下面小編就為大家?guī)硪黄猠asyUI實(shí)現(xiàn)(alert)提示框自動(dòng)關(guān)閉的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-11-11
  • 詳解基于Wepy開發(fā)小程序插件(推薦)

    詳解基于Wepy開發(fā)小程序插件(推薦)

    這篇文章主要介紹了詳解基于Wepy開發(fā)小程序插件(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-08-08
  • 利用js 進(jìn)行輸入框自動(dòng)匹配字符的小例子

    利用js 進(jìn)行輸入框自動(dòng)匹配字符的小例子

    制作論壇用到的輸入框~想模仿百度之類的寫一個(gè)自動(dòng)匹配字符
    2013-06-06
  • 最新評論