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

Question

假设我有一些 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 引入的内容。知道我该如何解决这个问题吗？

Answer 1

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

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

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

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

请参阅 http://api.jquery.com/on/

因此，

$(".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 元素）。

Answer 2

有时，这样做（得票最高的答案）并不总是足够：

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

希望这会有所帮助！

问候，

Answer 3

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

肖恩的回答展示了一个例子。

现已弃用：

使用 jQuery 函数 .live() 和 < a href="http://docs.jquery.com/Events/die" rel="nofollow noreferrer">.die()。可用于
jQuery 1.3.x

来自文档：

<块引用>

将每个段落的文本显示在
每当单击时都会出现警报框：

$("p").live("点击", function(){
  警报( $(this).text() );
});

此外，livequery 插件可以执行此操作并支持更多事件。< /p>

Answer 4

如果您要向 DOM 添加一堆锚点，请改为考虑事件委托。

这是一个简单的例子：

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

Answer 5

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

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

Answer 6

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

链接文本

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

Answer 7

如果您使用 jQuery 1.3+，则使用 .live()

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

Answer 8

您想要使用 live() 函数。请参阅文档。

例如：

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