欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

舉例：

頁面按鈕：

代碼片段：

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

瀏覽器console：

image.png

二、解決問題

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

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

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

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

原代碼片段修改如下：

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

修改后，瀏覽器console如下：

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

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

總結

相關文章

最新評論