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

Question

如何使用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>在这种情况下，test4链接是在用户单击时创建的a#anchor1。该test4链接没有click()与之关联的处理程序，即使它有class="myclass"。基本上，我想编写click()处理程序一次，并将其应用于页面加载时出现的内容，以及稍后通过AJAX / DHTML引入的内容。知道如何解决这个问题吗？

Answer 1

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

$('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 2

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

这是一个简单的例子：

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