Jquery事件處理問題

Question

說我有這個代碼：

$(document).ready(function()
{
   $(".foo").click(processFooClick);
}

一旦文檔加載完畢，然后通過javascript我動態地將一個帶有foo類的div添加到文檔中：

$("body").append( "<div class='foo'>click..</div>");

這個新div是否會自動應用事件處理程序，或者我是否需要再次運行事件設置代碼（$（“。foo”）。click（...））？

使用jquery的live函數會有幫助嗎？ 如果是這樣，怎么樣？

Answer 1

新div 不會附加事件處理程序。 live會讓它像你描述的那樣工作：

$(".foo").live('click', processFooClick);

但是，我只是再次將事件處理程序添加到新的div中。 除非您真的無法控制何時將新元素添加到頁面，否則不應使用live 。

Answer 2

click（）是bind（）的快捷方式。 bind將直接附加到匹配元素。 這意味着，不，你的新元素將沒有處理程序。 使用$（“。foo”）。live（processClick）將起作用，因為live（）通過將處理程序附加到文檔並捕獲冒泡事件來工作。 另請查看delegate（）以獲取更具范圍的實時類型的事件處理程序。

Answer 3

添加事件處理程序時，會將它們添加到元素本身，因此添加新的匹配元素不會導致它們具有事件處理程序。 我相信你可以重新分配處理程序。

使用.live（）避免了這個問題 - 我相信（釋義）事件是動態處理的，如果一個元素匹配它就應用了。 您可以根據需要添加元素，它們將處理已應用於匹配元素的任何事件。

Answer 4

live會工作，但你的第一個方法不會（如果你在運行第一個click功能后添加div）

如果您決定再次調用click，則需要確保不將所需的單擊處理程序兩次添加到所有原始foo div中，否則它們將運行兩次

Answer 5

我說你可能需要使用live，因為你的點擊事件注冊是在加載DOM之后完成的。 任何動態生成的DOM都不會獲得該事件處理程序，因此您必須使用live。 在這種情況下，像：

$(".foo").live('click', processFooClick);

或者如果你有一個較窄的上下文范圍：

$(".foo", $(someContext)[0]).live('click', processFooClick);

Answer 6

你的第一種方法不起作用，看看這個jsFiddle： http ： //jsfiddle.net/esN4Q/

但是， live會：

$(".foo").live('click', processFooClick);

jsFiddle jQuery live例子： http ： //jsfiddle.net/ePmXU/ （我在jsFiddle中添加了一個警告彈出，這樣我們就可以看到它在點擊時是否有效。）