如何使用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更高版本中的更改.从jQuery 1.7开始不推荐使用.live()方法.

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