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

在本例中,当用户单击#anchor1时,将创建test4链接。

test4链接没有与之关联的click()处理程序,即使它有class="myclass"。

基本上,我希望只编写一次click()处理程序,并将其应用于页面加载时呈现的内容,以及稍后通过AJAX / DHTML引入的内容。知道我该怎么补救吗?


当前回答

jQuery 1.7之后,首选的方法是.on()和.off()

Sean的回答就是一个例子。

现在弃用:

使用jQuery函数.live()和.die()。可以在 jQuery 1.3.x 从文档中可以看出: 控件中显示每个段落的文本 警报框,当它被点击: 美元(“p”)。生活(“点击”,函数(){ Alert ($(this).text()); }); 此外,livequery插件可以做到这一点,并支持更多的事件。

其他回答

有时这样做(投票最多的答案)并不总是足够的:

$('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时调用它:

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

希望这能有所帮助!

问候,

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

链接文本

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

jQuery 1.7之后,首选的方法是.on()和.off()

Sean的回答就是一个例子。

现在弃用:

使用jQuery函数.live()和.die()。可以在 jQuery 1.3.x 从文档中可以看出: 控件中显示每个段落的文本 警报框,当它被点击: 美元(“p”)。生活(“点击”,函数(){ Alert ($(this).text()); }); 此外,livequery插件可以做到这一点,并支持更多的事件。

如果你使用的是jQuery 1.3+,请使用.live()

将处理程序绑定到事件(例如 点击)查看所有当前-和未来- 匹配的元素。还可以绑定自定义 事件。

您需要使用live()函数。去看医生。

例如:

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