如何使用jQuery将事件附加到动态HTML元素?

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

例如:

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

我的HTML可能是这样的:

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

这没有问题。但是，请考虑.myclass元素是否在将来某个时候被写入页面。

例如:

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

在本例中，当用户单击#anchor1时，将创建test4链接。

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

基本上，我希望只编写一次click()处理程序，并将其应用于页面加载时呈现的内容，以及稍后通过AJAX / DHTML引入的内容。知道我该怎么补救吗?

当前回答

为所有当前和未来匹配的元素绑定处理程序到事件(如单击)。还可以绑定自定义事件。

链接文本

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

2009-08-31 19:32:46

其他回答

为所有当前和未来匹配的元素绑定处理程序到事件(如单击)。还可以绑定自定义事件。

链接文本

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

2009-08-31 19:32:46

您需要使用live()函数。去看医生。

例如:

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

2009-08-31 19:31:52

你可以为一个页面的所有元素绑定一个点击事件，无论它们是否已经在该页面上，或者它们是否会在未来的某个时间到达，就像这样:

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

我用了一段时间了。效果非常好。

在jQuery 1.7及以后版本中，建议使用.on()来代替bind或任何其他事件委托方法，但.bind()仍然有效。

2013-03-29 03:09:06

如果你使用的是jQuery 1.3+，请使用.live()

将处理程序绑定到事件(例如点击)查看所有当前-和未来- 匹配的元素。还可以绑定自定义事件。

2009-08-31 19:31:26

jQuery 1.7之后，首选的方法是.on()和.off()

Sean的回答就是一个例子。

现在弃用:

使用jQuery函数.live()和.die()。可以在 jQuery 1.3.x 从文档中可以看出: 控件中显示每个段落的文本警报框，当它被点击: 美元(“p”)。生活(“点击”,函数(){ Alert ($(this).text()); })；此外，livequery插件可以做到这一点，并支持更多的事件。

2009-08-31 19:30:58

如何使用jQuery将事件附加到动态HTML元素?

推荐文章

最新文章

标签