添加事件，AJAX附加内容

Question

比方说，我有一些链接，我想一个javascript操作添加到：

<a class='test'> 
<a class='test'> 
<a class='test'> 

当我的页面加载我给他们所有的点击事件：

$('.test').click(function(){ 
    alert("I've been clicked!") 
}); 

但是让我们再说我添加另一个元素，我想给它同样的事件。我不能这样做：

$('.test').click(function(){ 
    alert("I've been clicked!") 
}); 

因为然后前3将有2个事件在他们身上。处理这个问题的最好方法是什么？

Answer 1

可以绑定，将永远在DOM存在这样的$。对给父元素。

$(document).on('click','.test', function() { 
      console.log('Test clicked'); 
     }); 

需要注意的是： 您可以将始终存在的DOM元素的任何父，越接近父更好的替代document。

与click绑定的简单事件不会作为click将事件处理程序绑定到绑定时已存在于dom中的元素。因此，它不适用于稍后通过Ajax或jQuery动态添加到DOM的元素。为此，您必须使用event delegation。你可以使用$.on来达到这个目的。

检查的$.on

文档，你可以使用$.live但$直播折旧。使用$ .on代替。为$ .live和$ .delegate的$。对等效语法，做同样的事情

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

在这种情况下，事件处理程序将被绑定到document。并且事件将被jQuery委托给目标元素，在这种情况下test类。

UPDATE

我建议你通过$.on和$.off方法引擎盖下使用$.on所有事件处理的目的，因为所有其他的方法途径。

检查从jQuery的源v.1.7.2这些函数的定义

bind: function(types, data, fn) { 
    return this.on(types, null, data, fn); 
}, 
unbind: function(types, fn) { 
    return this.off(types, null, fn); 
}, 

live: function(types, data, fn) { 
    jQuery(this.context).on(types, this.selector, data, fn); 
    return this; 
}, 
die: function(types, fn) { 
    jQuery(this.context).off(types, this.selector || "**", fn); 
    return this; 
}, 

delegate: function(selector, types, data, fn) { 
    return this.on(types, selector, data, fn); 
}, 
undelegate: function(selector, types, fn) { 
    // (namespace) or (selector, types [, fn]) 
    return arguments.length == 1? this.off(selector, "**") : this.off(types, selector, fn); 
} 

这是这些方便的事件处理程序过于

blur focus focusin focusout load resize scroll unload click dblclick mousedown 
mouseup mousemove mouseover mouseout mouseenter mouseleave change select 
submit keydown keypress keyup error contextmenu 

你可以看到所有的方法都使用$.on真和$.off自己。所以使用$.on你至少可以保存一个函数调用，尽管在大多数情况下它并不那么重要。

Answer 2

由于您的.test是通过ajax附加的，因此您需要在该事件上委托事件，普通绑定不会影响它们。 委托绑定将应用于DOM中存在的所有元素，并将添加到DOM。

$('body').on('click', '.test', function() { 
    // your code 
}); 

而不是body你可以使用已经属于DOM所有.test的容器。

获取更多关于.on()

您还可以使用.delegate()类似以下内容：

$('#container').delegate('.test', 'click', function() { 
    // your code 
}); 

Answer 3

使用on()，并将其附加到它们的包含元素。

$(".container").on("click", ".test", function(){ 
    alert("You clicked me!"); 
}); 

Answer 4

因为当你注入（通过AJAX或JavaScript）新内容到DOM，现有绑定不会工作。你必须要么重新绑定事件或使用jQuery on将当前元素和未来元素

工作

http://api.jquery.com/on/

所以到FX本，改变

$('.test').click(function(){ 
    alert("I've been clicked!") 
}); 

到

$(document).on('click','.test',function(){ 
    alert("I've been clicked!") 
}); 

Answer 5

如果将元素动态添加到页面，请查看jQuery on event。并考虑以下为例：

http://jsfiddle.net/n1ck/QQYq2/2/