javascript - 如何使用jQuery将事件附加到动态HTML元素？ [重复](How do I attach events to dynamic HTML elements with jQuery? [duplicate])

Question

This question already has an answer here:

(这个问题已经在这里有了答案：)

• Event binding on dynamically created elements?

  (在动态创建的元素上进行事件绑定？)

  23 answers

  (23个答案)

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 .myclass elements 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, the test4 link is created when a user clicks on a#anchor1 .

(在这种情况下，当用户单击a#anchor1时将创建test4链接。)

The test4 link does not have the click() handler associated with it, even though it has class="myclass" .

(尽管test4链接具有class="myclass" ，但它没有与click()处理函数关联的内容。)

Basically, I would like to write the click() handler once and have it apply to both content present at page load, and content brought in later via AJAX / DHTML .

(基本上，我想编写一次click()处理函数，并将其应用于页面加载时出现的内容以及以后通过AJAX / DHTML引入的内容。)

Any idea how I can fix this?

(知道我该如何解决吗？)

  ask by frankadelic translate from so

Answer 1

I am adding a new answer to reflect changes in later jQuery releases.

(我正在添加一个新答案，以反映jQuery更高版本中的更改。)

The .live() method is deprecated as of jQuery 1.7.

(从jQuery 1.7开始不推荐使用.live（）方法。)

From http://api.jquery.com/live/

(从http://api.jquery.com/live/)

As of jQuery 1.7, the .live() method is deprecated.

(从jQuery 1.7开始，不推荐使用.live（）方法。)

Use .on() to attach event handlers.

(使用.on（）附加事件处理程序。)

Users of older versions of jQuery should use .delegate() in preference to .live().

(较旧版本的jQuery的用户应优先使用.delegate（）而不是.live（）。)

For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a selector combined with 'myclass' as an argument.

(对于jQuery 1.7+，您可以使用.on（）将事件处理程序附加到父元素，然后将与'myclass'组合的选择器作为参数传递。)

See http://api.jquery.com/on/

(参见http://api.jquery.com/on/)

So instead of...

(所以代替...)

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

You can write...

(你可以写...)

$('body').on('click', 'a.myclass', function() {
    // do something
});

This will work for all a tags with 'myclass' in the body, whether already present or dynamically added later.

(这将适用于体内带有“ myclass”的所有标签，无论该标签已经存在还是以后动态添加。)

The body tag is used here as the example had no closer static surrounding tag, but any parent tag that exists when the .on method call occurs will work.

(这里使用body标签，因为该示例没有更紧密的静态周围标签，但是当.on方法调用发生时存在的任何父标签都可以使用。)

For instance a ul tag for a list which will have dynamic elements added would look like this:

(例如，列表的ul标签将添加动态元素，如下所示：)

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

As long as the ul tag exists this will work (no li elements need exist yet).

(只要ul标签存在，它将起作用（尚不存在li元素）。)