快捷導(dǎo)航

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

更新時間：2023年06月12日 11:05:45 作者：孫三苗

這篇文章主要給大家介紹了關(guān)于Jquery?on("click")方法綁定事件后執(zhí)行多次的解決方法,文章通過實例代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

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

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

舉例：

頁面按鈕：

代碼片段：

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

瀏覽器console：

二、解決問題

使用js動態(tài)加載內(nèi)容，同時需要對加入的內(nè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è)務(wù)邏輯 ……
})

修改后，瀏覽器console如下：

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

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

總結(jié)

您可能感興趣的文章:

相關(guān)文章

jquery命令匯總,方便使用jquery的朋友
jquery命令匯總,方便使用jquery的朋友，需要的朋友可以收藏下
2012-06-06
jQuery實現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動展開與隱藏效果
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動展開與隱藏效果,涉及jQuery鼠標(biāo)事件的響應(yīng)及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
jQuery Easyui快速入門教程
jQuery EasyUI是一組基于JQuery的UI插件集合，而JQueryEasyUI的目標(biāo)就是幫助開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面，下面小編帶領(lǐng)大家一起學(xué)習(xí)jquery easyui入門知識，一起看看吧
2016-08-08
如何編寫jquery插件
編寫插件的目的是給已經(jīng)有的一系列方法或函數(shù)做一個封裝，以便在其他地方重復(fù)使用，提高開發(fā)效率和方便后期維護(hù)。本文將詳細(xì)介紹如何編寫jQuery插件
2017-03-03
HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果(附demo源碼下載)
這篇文章主要介紹了HTML5+jQuery插件Quicksand實現(xiàn)超酷的星際爭霸2兵種分類展示效果,詳細(xì)分析了Quicksand插件的使用及圖片浮動顯示的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-05-05
利用jQuery實現(xiàn)滑動開關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實現(xiàn)滑動開關(guān)按鈕效果，文中給出了詳細(xì)的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡介，下面來一起看看吧。
2017-02-02
EasyUI Combobox設(shè)置默認(rèn)值獲取text的方法
這篇文章主要介紹了EasyUI Combobox設(shè)置默認(rèn)值獲取text的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-11-11
jQuery圖片輪播插件——前端開發(fā)必看
這篇文章主要介紹了jQuery圖片輪播插件代碼的相關(guān)資料,在各大網(wǎng)站都可以簡單圖片輪播效果，非常實用，需要的朋友可以參考下
2016-05-05
這篇文章主要介紹了jquery實現(xiàn)的美女拼圖游戲,實例分析了jQuery操作圖片的相關(guān)技巧,需要的朋友可以參考下
2015-05-05