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

javascript jquery events dhtml

2022-08-29 22:41:18

假设我有一些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>

在这种情况下，当用户单击时，将创建链接。test4a#anchor1

该链接没有与之关联的处理程序，即使它具有 .test4click()class="myclass"

基本上，我想编写一次处理程序，并将其应用于页面加载时存在的内容以及稍后通过AJAX / DHTML引入的内容。任何想法，我怎么能解决这个问题？click()

答案 1

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

从 http://api.jquery.com/live/

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

对于 jQuery 1.7+ ，您可以使用 .on（）将事件处理程序附加到父元素，并将 a 选择器与 '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 元素存在）。

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

希望这有帮助！

问候