假设我有一些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版本中的变化。.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元素存在)。
有时这样做(投票最多的答案)并不总是足够的:
$('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();
}
希望这能有所帮助!
问候,