事件繫結和取消繫結,重複彈出框問題

2021-07-24 04:04:28 字數 1293 閱讀 1400

最近在做click的事件繫結,發現如果對事件繫結了兩次click,就會彈出兩次彈出框,最後找到了解決方案。

1.首先,說下對元素進行事件繫結的方法

$("#myid").on("click", function (event) );

此時會彈出hello,但是有時候我們發現不止彈出一次hello,原因可能是我們對這個id繫結了多個click事件,如果我們只想彈出一次,這就要在繫結click事件前取消繫結過的click,這時我們可以用unbind,使用原理就是我們對事件進行了簡單的判斷,若繫結過事件,則不繫結,若沒繫結則繫結事件。 

$("#myid").unbind("click").on("click", function (event) );
2.其次,對動態生成元素繫結事件

在解決了重複繫結問題後,我發現這個繫結方法對js指令碼動態生成的html沒有左右,此時我們可以使用另乙個繫結方法delegate

$("body").delegate('#dynamic-table tr #detail', 'click', function () );

這樣我們就對動態生成的元素進行了繫結,對於重複繫結的問題可以使用undelegate解決 

$("body").undelegate('#dynamic-table tr #detail', 'click');            

$("body").delegate('#dynamic-table tr #detail', 'click', function () );

delegate() 方法為指定的元素(屬於被選元素的子元素)新增乙個或多個事件處理程式,並規定當這些事件發生時執行的函式。

使用 delegate() 方法的事件處理程式適用於當前或未來的元素(比如由指令碼建立的新元素)。

$(selector).delegate(childselector,event,data,function)
引數

描述childselector

必需。規定要附加事件處理程式的乙個或多個子元素。

event

必需。規定附加到元素的乙個或多個事件。

由空格分隔多個事件值。必須是有效的事件。

data

可選。規定傳遞到函式的額外資料。

function

必需。規定當事件發生時執行的函式。

事件的繫結與取消

為同乙個元素新增相同的事件時,後新增的事件會覆蓋之前新增的。o.onclick function o.onclick function 列印結果為2。為了解決後寫的覆蓋之前的,就需要使用事件的繫結。分為標準 谷歌火狐等瀏覽器 ie 事件的繫結 標準 元素.addeventlistener 事件型別 ...

jQuery動態行繫結事件,發生重複繫結解決方案

背景 系統需要動態增加分類,各分類下有各自的3項資金 有資金小計,問題就出在這裡 問題 新增一條分類,需要給3項資金新繫結小計功能。這個時候會發現,初始第一行的計算,會呼叫兩次,增加到三行的時候,第一行會重複計算三次,第二行會重複計算兩次.以此類推 為什麼會執行多次?猜詞 新增一行,繫結計算函式,歷...

事件繫結和事件委託區別

靜態繫結,也是最直接的事件繫結 通過事件屬性,直接顯示的給元素繫結事件,例如 該方式缺點 當頁面多元素都要新增事件時,定義繁瑣。函式名稱定義改變,一次要修改兩個地方。動態繫結 關於事件監聽的適配 因為ie 有自己的事件監聽 attachevent 和detachevent 分別用於事件監聽 obtn...