Question

说我有这段代码：

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

文档加载后，通过javascript我动态地将foo类的新div添加到文档中：

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

这个新div是否会自动应用事件处理程序，或者我是否需要运行事件设置代码（$（“。foo”）。再次点击（...））？

使用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）

如果您决定再次拨打电话，则需要确保没有将点击处理程序两次添加到所有原始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中添加了一个警告弹出，这样我们就可以看到它点击后是否有效。）

Jquery事件处理问题

6 个答案: