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

在 jQuery 1.7 之后，首选方法是 .on（） 和 .off（）

肖恩的回答就是一个例子。

现已弃用：

使用 jQuery 函数 .live（） 和 .die（）。可用于 jQuery 1.3.x

从文档中：

要在 每当单击时发出警报框：

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

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

如果您在 jQuery 1.3+ 上，请使用 .live（）

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

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

例如：

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

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

链接文本

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

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

下面是一个简单的示例：

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

我正在添加一个新答案，以反映以后的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 元素）。

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

$(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 及更高版本中，建议使用 in 代替 bind 或任何其他事件委派方法，但仍然有效。.on().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(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();
}

希望这会有所帮助！

问候