如何使用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>

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

test4链接没有与它相关联的click()处理程序，尽管它有class="myclass"。

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

581467 次浏览
小开

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

肖恩的回答显示了一个示例。

现在弃用:

使用jQuery函数.live()和.die()。可以在 jQuery 1.3.x < / p >

从文档中可以看出:

显示每个段落的文本

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

此外，livequery插件可以做到这一点，并支持更多的事件。

小开

如果你使用的是jQuery 1.3+，那么使用。生活()

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

小开

您希望使用live()函数。看到# EYZ1。

例如:

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

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

link text

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

如果您正在向DOM添加一堆锚，请查看事件委托。

这里有一个简单的例子:

$('#somecontainer').click(function(e) {
var $target = $(e.target);
if ($target.hasClass("myclass")) {
// do something
}
});
小开
最佳答案

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

从# EYZ0

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

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

看到# EYZ0

所以与其…

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

你可以写…

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

这将适用于主体中所有带有'myclass'的标签，无论是已经存在的还是以后动态添加的。

这里使用body标记，因为示例中没有更接近的静态环绕标记，但是当.on方法调用发生时，任何存在的父标记都可以工作。例如，列表的ul标签将添加动态元素，看起来像这样:

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

只要ul标签存在，这就可以工作(还不需要li元素存在)。

小开

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

$(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()仍然有效。

小开

有时这样做(得票最多的答案)并不总是足够的:

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

这可能是一个问题，因为订单事件处理程序被触发。如果你发现自己这样做了，但是因为处理的顺序而引起了问题。你总是可以把它包装到一个函数中，当被调用时“刷新”侦听器。

例如:

function RefreshSomeEventListener() {
// Remove handler from existing elements
$("#wrapper .specific-selector").off();


// Re-add event handler for all matching elements
$("#wrapper .specific-selector").on("click", function() {
// Handle event.
}
}

因为它是一个函数，每当我以这种方式设置侦听器时，我通常会在document ready时调用它:

$(document).ready(function() {
// Other ready commands / code


// Call our function to setup initial listening
RefreshSomeEventListener();
});

然后，每当你添加一些动态添加的元素时，再次调用该方法:

function SomeMethodThatAddsElement() {
// Some code / AJAX / whatever.. Adding element dynamically


// Refresh our listener, so the new element is taken into account
RefreshSomeEventListener();
}

希望这能有所帮助!

问候,


提交答案