如何使用 jQuery 将事件附加到动态 HTML 元素? [英] How do I attach events to dynamic HTML elements with jQuery?

问题描述

假设我有一些 jQuery 代码，它将事件处理程序附加到所有具有 .myclass 类的元素.

Suppose I have some jQuery code that attaches an event handler to all elements with class .myclass.

例如:

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

我的 HTML 可能如下所示:

And my HTML might be as follows:

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

那没问题.但是，请考虑 .myclass 元素是否在未来某个时间写入页面.

That works with no problem. However, consider if the .myclass elements were written to the page at some future time.

例如:

<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>

在这种情况下，当用户点击 a#anchor1 时，会创建 test4 链接.

In this case, the test4 link is created when a user clicks on a#anchor1.

test4 链接没有关联的 click() 处理程序，即使它有 class="myclass".

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

基本上，我想编写一次 click() 处理程序，并将其应用于页面加载时出现的内容以及稍后通过 AJAX/DHTML 引入的内容.知道如何解决这个问题吗?

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. Any idea how I can fix this?

推荐答案

我正在添加一个新答案以反映 jQuery 后续版本中的更改..live() 方法从 jQuery 1.7 开始被弃用.

I am adding a new answer to reflect changes in later jQuery releases. The .live() method is deprecated as of jQuery 1.7.

来自http://api.jquery.com/live/

从 jQuery 1.7 开始，.live() 方法已被弃用.使用 .on() 附加事件处理程序.旧版本 jQuery 的用户应该优先使用 .delegate() 而不是 .live().

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

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

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.

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

所以，而不是...

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

你可以写...

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

这将适用于正文中带有myclass"的所有标签，无论是已经存在还是稍后动态添加.

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

这里使用 body 标签是因为该示例没有更接近的静态周围标签，但是在 .on 方法调用发生时存在的任何父标签都可以使用.例如，将添加动态元素的列表的 ul 标记如下所示:

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. For instance a ul tag for a list which will have dynamic elements added would look like this:

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

只要 ul 标签存在，这将起作用(还不需要存在 li 元素).

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

这篇关于如何使用 jQuery 将事件附加到动态 HTML 元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！