Jquery on方法綁定事件後執行多次的實現方法，jqueryon

Jquery on方法綁定事件後執行多次的實現方法，jqueryon

這兩天工作中遇到使用js動態載入內容，同時需要對加入的內容綁定點擊事件的，當時想想了想可以使用內聯的onclick 來實現，後來沒有這樣做，使用的是 on(‘click',function(){}) ,然而使用on方法的時候就發現，on 對同一個元素多次綁定同一個事件的時候，這個事件就會執行多次。

下面給出這種情況的執行個體：

$(function(){    $(".add").click(function(eve){      $(".btn-area").append("<button class='test-btn'>test button</button>");      //$(".test-btn").off("click");      $(".test-btn").on("click",function(){        console.log("test button .....");      });    });});

在點擊add按鈕的添加測試按鈕，測試按鈕綁定點擊事件，console 台輸出一句話。

執行結果如下：

很明顯，第一個按鈕點擊之後執行了5次。

遇到這種情況需要在每次綁定事件之前，對該事件解除綁定，也就是 $(“.test-btn”).off(“click”); ，off方法解除綁定。

以上這篇Jquery on方法綁定事件後執行多次的實現方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。