我有一些代碼,我循環(huán)遍歷頁(yè)面上的所有選擇框,并將 .hover
事件綁定到它們,以在 mouse on/off
上對(duì)其寬度進(jìn)行一些調(diào)整。
這發(fā)生在頁(yè)面準(zhǔn)備好并且工作正常。
我遇到的問(wèn)題是,在初始循環(huán)之后通過(guò) Ajax 或 DOM 添加的任何選擇框都不會(huì)綁定事件。
我已經(jīng)找到了這個(gè)插件(jQuery Live Query Plugin),但是在我使用插件向我的頁(yè)面添加另一個(gè) 5k 之前,我想看看是否有人知道如何做到這一點(diǎn),無(wú)論是直接使用 jQuery 還是通過(guò)其他選項(xiàng)。
jQuery.fn.on
的文檔中有很好的解釋。
簡(jiǎn)而言之:
因此在下面的示例中 #dataTable tbody tr
在生成代碼之前必須存在。
$("#dataTable tbody tr").on("click", function(event){ console.log($(this).text()); });
如果新的 HTML 被注入到頁(yè)面中,最好使用委托事件來(lái)附加事件處理程序,如下所述。
委托事件的優(yōu)點(diǎn)是它們可以處理來(lái)自稍后添加到文檔中的后代元素的事件。例如,如果表存在,但使用代碼動(dòng)態(tài)添加行,則以下內(nèi)容將處理它:
$("#dataTable tbody").on("click", "tr", function(event){ console.log($(this).text()); });
除了能夠處理尚未創(chuàng)建的后代元素上的事件之外,委托事件的另一個(gè)優(yōu)點(diǎn)是,當(dāng)必須監(jiān)視許多元素時(shí),它們可能會(huì)降低開(kāi)銷(xiāo)。在 tbody
中有 1,000 行的數(shù)據(jù)表上,第一個(gè)代碼示例將處理程序附加到 1,000 個(gè)元素。
委托事件方法(第二個(gè)代碼示例)僅將事件處理程序附加到一個(gè)元素 tbody
,并且該事件只需要向上冒泡一級(jí)(從單擊的 tbody
到 tbody
)。
注意:委托事件不適用于SVG。
從 jQuery 1.7 開(kāi)始,您應(yīng)該使用 jQuery.fn.on
并填充選擇器參數(shù):
$(staticAncestors).on(eventName, dynamicChild, function() {});
說(shuō)明:
這稱為事件委托,其工作原理如下。該事件附加到應(yīng)處理的元素的靜態(tài)父級(jí) (staticAncestors
)。每次在此元素或后代元素之一上觸發(fā)事件時(shí),都會(huì)觸發(fā)此 jQuery 處理程序。然后,處理程序檢查觸發(fā)事件的元素是否與您的選擇器匹配(dynamicChild
)。當(dāng)存在匹配時(shí),就會(huì)執(zhí)行您的自定義處理程序函數(shù)。
在此之前,推薦的方法是使用 live()
:
$(selector).live( eventName, function(){} );
但是,live()
在 1.7 中已被棄用,取而代之的是 on()
,并在 1.9 中完全刪除。 live()
簽名:
$(selector).live( eventName, function(){} );
...可以替換為以下on()
簽名:
$(document).on( eventName, selector, function(){} );
例如,如果您的頁(yè)面動(dòng)態(tài)創(chuàng)建類(lèi)名為 dosomething
的元素,您可以將事件綁定到已經(jīng)存在的父級(jí)(這是問(wèn)題的核心,您需要一些東西存在綁定到,不綁定到動(dòng)態(tài)內(nèi)容),這可以(也是最簡(jiǎn)單的選項(xiàng))是 document
。但請(qǐng)記住 document
可能不是最有效的選擇 .
$(document).on('mouseover mouseout', '.dosomething', function(){ // what you want to happen when mouseover and mouseout // occurs on elements that match '.dosomething' });
事件綁定時(shí)存在的任何父級(jí)都可以。例如
$('.buttons').on('click', 'button', function(){ // do something here });
適用于