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

假设我有一些jQuery代码，它将事件处理程序附加到类为

.myclass

的所有元素

例如：

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

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

我的HTML可能如下所示：

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

在这种情况下，当用户单击

a#anchor1

时，就会创建

test4

链接

test4

链接没有与其关联的

click（）

处理程序，即使它有

class=“myclass”

---

基本上，我希望编写一次

click（）

处理程序，并将其应用于页面加载时显示的内容和稍后通过AJAX/DHTML导入的内容。你知道我该怎么解决这个问题吗

在jQuery 1.7之后，首选的方法是和

显示了一个示例

现已弃用： 使用jQuery函数和。可在 jQuery 1.3.x

从文档中：

以文本形式显示每个段落的文本 无论何时单击警报框：

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

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

---

如果您的应用程序在jquery1.3+上，则使用

---

将处理程序绑定到事件（如 单击）查看所有当前和未来- 匹配元素。也可以绑定自定义 事件

---

您想使用

live（）

函数。看

例如：

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

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

$（“#主播1”）.live（“单击”，函数（）{
$（“#主播1”）。附加（“”）；
});

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

---

如果要向DOM添加一堆锚点，请查看事件委派

下面是一个简单的例子：

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

---

我添加了一个新的答案，以反映稍后jQuery版本中的更改。.live（）方法从jQuery 1.7开始就不推荐使用

从

从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）

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

看

所以不是

$(".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
});

这可能是一个问题，因为触发事件处理程序的顺序。如果您发现自己正在这样做，但由于处理顺序的原因，这会导致问题。。您总是可以将其包装到一个函数中，当调用该函数时，它会“刷新”侦听器

例如：

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

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();
}

希望这有帮助

---

关于，

如果我的选择器需要是其他元素的父元素，该怎么办？例如：$（“p”）.parent（.myclass”）.live（“单击”），这似乎不适用于live（）。您可以尝试将其合并到一个查询中，如$（“p:has（.myclass）”）.live（“单击”，…）。注意：在某些情况下，live并不适用于所有事件。请查看live查询插件以获取live未提供的支持。这不再是正确答案。从jQuery 1.7开始，.live（）方法已被弃用。请改用

.on（）

。让我们获得正确答案[一些更新投票。或者@Matt-您想更新您的答案吗？这一出色的解决方案似乎与Fancybox中的HTML内容存在问题。我已恢复为手动创建处理程序。我还没有尝试iFrame内容，因此fanyxbos的内容是正文的一部分，或者是文档变量的一部分。live（）已弃用，.on（）已出现。但不清楚当我编写

$（'selector'）。在（'event'，callback（）{}）

时，它是否会工作。需要在（）中写入所需的选择器。

$（document）。在（'event'，selector'，callback（）{}）或，
$（'body'）。在（'event'，selector'，callback callback（）{}）中
性能如何？与直接附加事件相同吗？当
元素的
href
地址设置为
http://？？
$（'body'）。在（'each'、'myclass'，function（）{//do something}）上；
@Sean我试图在“类”的“each”上做点什么，但它不起作用。怎么了？
live
已被弃用。谢谢！无法与其他答案一起使用，您的解决方案非常有效，但是如果我调用RefreshSomeEventListener（）添加动态元素后，将触发“我的事件”twice@DKMudrechenko这可能是因为您没有完全从中删除事件侦听器。这很有效，而且解释得也很好。下面是一篇关于如何为动态元素绑定click事件的详细文章纯javascript（vanilla js）解决方案：下面是live不推荐的答案。