使用Layui數據表格，表格重載之後，表頭工具欄按鈕失效！【已解決】

問題描述：

今天碰到一個很頭痛的問題，項目使用的是Layui的前端UI框架，在使用Layui數據表格的時候發現，初次加載頭部工具欄【刪除所選班級】按鈕功能都正常，但是在搜索 、修改、刪除[都會執行一次表格重載獲取新的數據] 之後 ，頭部工具欄的按鈕就失效了，怎麼點擊都無效！但是刷新一次頁面之後又會生效。但是一執行重載之後又失效了！

• 如圖所示
  

問題分析

• 經過一點問題一點問題的排除，最後發現是因爲工具欄的按鈕是後期渲染出來的，所以第一次載入頁面按鈕事件是生效的，但是重載之後按鈕也會重新加載。這時候按鈕就變成未來元素了。這時候按鈕就會捕捉不到click操作。
• 此時只要換成點擊事件委託就行了！無論重載多次都不會失效！
• 瞭解事件委託（參考文章）

解決方法

• 使用點擊事件委託

  // $('父元素').on('事件名','哪個子元素觸發',傳給回調函數的參數，事件觸發時的回調函數);
  $('body').on('click', '#batchremove', function() {
  	// xxxxx
  }
  

解釋：

• 參數1：事件名，代表要綁定什麼事件，但是記得不用加on，也就是說如果你想加點擊事件，只要寫’click’即可，注意是字符串！所以要打單引號或者雙引號
• 參數2：只能由哪個子元素觸發，例如我寫 “li”，就代表只能由這個父元素裏面的li觸發事件，其他子元素不會觸發。需要注意的是，這也是字符串，並且，參數2可以不寫，那就代表僅僅只是給父元素加一個點擊事件，並且所有子元素都能觸發到這個事件（因爲事件冒泡）
• 參數3：其實一般不會用，就是如果想事件觸發時，自己給回調函數傳一些值就寫，這個參數也可以不寫！
• 參數4：事件觸發時的回調函數

總結：參數1和參數4是必須的，其他是可選的，如果你要用事件委託，請寫上參數2