如何使用jQuery将事件附加到动态HTML元素？ [重复]

本文翻译自：How do I attach events to dynamic HTML elements with jQuery? [duplicate]

This question already has an answer here:这个问题已经在这里有了答案：

Event binding on dynamically created elements?在动态创建的元素上进行事件绑定？23 answers23个答案

Suppose I have some jQuery code that attaches an event handler to all elements with class.myclass.假设我有一些jQuery代码，将事件处理程序附加到所有类为.myclass元素上。

For example:例如：

$(function(){$(".myclass").click( function() {// do something});});

And my HTML might be as follows:我的HTML可能如下所示：

<a class="myclass" href="#">test1</a><a class="myclass" href="#">test2</a><a class="myclass" href="#">test3</a>

That works with no problem.没问题。However, consider if the.myclasselements were written to the page at some future time.但是，请考虑是否在将来某个时间将.myclass元素写入页面。

For example:例如：

<a id="anchor1" href="#">create link dynamically</a><script type="text/javascript">$(function(){$("#anchor1").click( function() {$("#anchor1").append('<a class="myclass" href="#">test4</a>');});});</script>

In this case, thetest4link is created when a user clicks ona#anchor1.在这种情况下，当用户单击a#anchor1时将创建test4链接。

Thetest4link does not have theclick()handler associated with it, even though it hasclass="myclass".尽管test4链接具有class="myclass"，但它没有与click()处理函数关联的内容。

Basically, I would like to write theclick()handler once and have it apply to both content present at page load, and content brought in later viaAJAX / DHTML.基本上，我想编写一次click()处理函数，并将其应用于页面加载时出现的内容以及以后通过AJAX / DHTML引入的内容。Any idea how I can fix this?知道我该如何解决吗？

#1楼

参考：/question/5hXe/如何使用jQuery将事件附加到动态HTML元素-重复

#2楼

After jQuery 1.7 the preferred methods are .on() and .off()在jQuery 1.7之后，首选方法是.on（）和.off （）

Sean's answer shows an example.肖恩的答案显示了一个例子。

Now Deprecated:现在不推荐使用：

Use the jQuery functions.live()and.die().使用jQuery函数.live()和.die()。Available in jQuery 1.3.x在jQuery 1.3.x中可用

From the docs:从文档：

To display each paragraph's text in an alert box whenever it is clicked:若要在单击时在警告框中显示每个段落的文本：

$("p").live("click", function(){ alert( $(this).text() ); });

Also, the livequery plugin does this and has support for more events.另外， livequery插件可以做到这一点，并支持更多事件。

#3楼

If your on jQuery 1.3+ then use .如果您使用的是jQuery 1.3+，请使用。live()生活（）

Binds a handler to an event (like click) for all current - and future - matched element.将所有当前-和将来-匹配元素的处理程序绑定到事件（例如click）。Can also bind custom events.也可以绑定自定义事件。

#4楼

You want to use thelive()function.您想使用live()函数。See the docs .请参阅文档 。

For example:例如：

$("#anchor1").live("click", function() {$("#anchor1").append('<a class="myclass" href="#">test4</a>');});

#5楼

Binds a handler to an event (like click) for all current - and future - matched element.将所有当前-和将来-匹配元素的处理程序绑定到事件（例如click）。Can also bind custom events.也可以绑定自定义事件。

link text连结文字

$(function(){$(".myclass").live("click", function() {// do something});});

#6楼

If you're adding a pile of anchors to the DOM, look into event delegation instead.如果要向DOM添加一堆锚点，请改为考虑事件委托。

Here's a simple example:这是一个简单的例子：

$('#somecontainer').click(function(e) { var $target = $(e.target); if ($target.hasClass("myclass")) {// do something}});