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

Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法

 更新時(shí)間：2023年06月12日 11:05:45   作者：孫三苗  
這篇文章主要給大家介紹了關(guān)于Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法,文章通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、發(fā)現(xiàn)問題

在開發(fā)過程中，無意發(fā)現(xiàn)頁面彈窗按鈕的點(diǎn)擊事件使用on函數(shù)綁定click 時(shí)，產(chǎn)生多次請求，從而可能會造成不必要的資源消耗。

舉例：

頁面按鈕：

代碼片段：

let drBox = $('#choiceDetailPopup'),
// 提交
console.log("submitTask start");
drBox.on('click','#submitTask',function(){
    console.log("submitTask click");
    // 處理自己的業(yè)務(wù)邏輯 ……
})

瀏覽器console：

image.png

二、解決問題

使用js動態(tài)加載內(nèi)容，同時(shí)需要對加入的內(nèi)容綁定點(diǎn)擊事件的，on(‘click’,function(){}) 對同一個(gè)元素多次綁定同一個(gè)事件的時(shí)候，這個(gè)事件就會執(zhí)行多次。

在每次綁定事件之前，對該事件解綁，可以使用的辦法：

.off(“click”); //解除綁定點(diǎn)擊事件
.unbind("click");//移除綁定點(diǎn)擊事件
.unbind(); //移除所有綁定事件

我采用第一種辦法，直接在 on 綁定 click 前，先釋放，再綁定。

原代碼片段修改如下：

let drBox = $('#choiceDetailPopup'),
// 提交
console.log("submitTask start");
drBox.off('click').on('click','#submitTask',function(){
    console.log("submitTask click");
    // 處理自己的業(yè)務(wù)邏輯 ……
})

修改后，瀏覽器console如下：

事件觸發(fā)正常了。

實(shí)際的場景可能會復(fù)雜得多，因此在使用on()方法給元素綁定事件的時(shí)候要格外注意多次重復(fù)綁定的問題。

總結(jié)

相關(guān)文章

最新評論