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

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

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

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

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

舉例：

頁(yè)面按鈕：

代碼片段：

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

瀏覽器console：

image.png

二、解決問(wèn)題

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

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

.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í)際的場(chǎng)景可能會(huì)復(fù)雜得多，因此在使用on()方法給元素綁定事件的時(shí)候要格外注意多次重復(fù)綁定的問(wèn)題。

總結(jié)

相關(guān)文章

最新評(píng)論