原文鏈接:https://blog.csdn.net/Fly_1213/article/details/99708034
問題:初次加載頭部工具欄【刪除所選班級】按鈕功能都正常,但是在搜索 、修改、刪除[都會執行一次表格重載獲取新的數據] 之后 ,頭部工具欄的按鈕就失效了,怎么點擊都無效!但是刷新一次頁面之后又會生效。但是一執行重載之后又失效了!
原因:是因為工具欄的按鈕是后期渲染出來的,所以第一次載入頁面按鈕事件是生效的,但是重載之后按鈕也會重新加載。這時候按鈕就變成未來元素了。這時候按鈕就會捕捉不到click操作。
解決辦法:此時只要換成點擊事件委托就行了!無論重載多次都不會失效!
// 使用點擊事件委托
// $('父元素').on('事件名','哪個子元素觸發',傳給回調函數的參數,事件觸發時的回調函數); $('body').on('click', '#batchremove', function() { // xxxxx }
解釋:
參數1(必須):事件名,代表要綁定什么事件,但是記得不用加on,也就是說如果你想加點擊事件,只要寫’click’即可,注意是字符串!所以要打單引號或者雙引號
參數2(可選):只能由哪個子元素觸發,例如我寫 “li”,就代表只能由這個父元素里面的li觸發事件,其他子元素不會觸發。需要注意的是,這也是字符串,並且,參數2可以不寫,那就代表僅僅只是給父元素加一個點擊事件,並且所有子元素都能觸發到這個事件(因為事件冒泡)
參數3(可選):其實一般不會用,就是如果想事件觸發時,自己給回調函數傳一些值就寫,這個參數也可以不寫!
參數4(必須):事件觸發時的回調函數
總結:參數1和參數4是必須的,其他是可選的,如果你要用事件委托,請寫上參數2
如圖所示: