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>

在这种情况下，当用户点击test4时会创建a#anchor1链接。

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'的a选择器作为参数传递。

请参阅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()

Sean's answer显示了一个示例。

现已弃用：

使用jQuery函数.live()和.die()。可用   jQuery 1.3.x

来自文档：
显示每个段落的文本单击警告框时：
$("p").live("click", function(){
  alert( $(this).text() );
});
此外，livequery插件执行此操作并支持更多活动。

Answer 4

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

这是一个简单的例子：

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

Answer 5

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

link text

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

Answer 6

如果你在jQuery 1.3+上使用。live()

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

Answer 7

您想使用live()功能。请参阅the docs。

例如：

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

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

7 个答案:

现已弃用：