将事件添加到ajax附加内容
假设我有一些链接，我想添加一个javascript动作：
当我的页面加载时，我给他们所有的点击事件：
$('.test').click(function(){ alert("I've been clicked!") });
但是让我们说后来我添加了另一个元素，我想给它同样的事件。 我不能这样做：
$('.test').click(function(){ alert("I've been clicked!") });
因为那时前3个将有2个事件。 处理这个问题的最佳方法是什么？
您可以将$ .on绑定到一个始终存在于dom中的父元素。
$(document).on('click','.test', function() { console.log('Test clicked'); });
请注意：您可以将document替换为dom中始终存在的元素的任何父元素，并且父元素越接近越好。
click简单事件绑定不会起作用，因为click将事件处理程序绑定到绑定时已存在于dom中的元素。 因此它不适用于稍后通过Ajax或jQuery动态添加到dom的元素。 为此，您必须使用event delegation 。 你可以使用$.on来达到这个目的。
检查$ .on的文档
您可以使用$.live但$ live折旧。 请改用$ .on。 $ .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 。 在这种情况下， test类将通过jQuery将事件委托给target元素。
UPDATE
我建议您使用$.on进行所有事件处理，因为所有其他方法都通过$.on和$.off $.on方法$.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本身。 所以使用$.on你至少可以保存一个函数调用，虽然在大多数情况下这并不重要。
由于你的.test是通过ajax附加的，所以你需要委托事件，普通绑定不会影响它们。 委托绑定将应用于DOM中存在的所有元素，并将添加到DOM。
$('body').on('click', '.test', function() { // your code });
您可以使用已经属于DOM的所有.test的容器而不是body 。
了解更多关于.on()
您也可以使用.delegate() ，如下所示：
$('#container').delegate('.test', 'click', function() { // your code });
如果将元素动态添加到页面，请查看事件上的jQuery。 并考虑以下例子：
使用on() ，并将其附加到其包含元素。
$(".container").on("click", ".test", function(){ alert("You clicked me!"); });
因为当您向DOM注入新内容时（通过ajax或javascript），现有绑定将无法工作。您必须重新绑定事件或使用jQuery on ，它将适用于当前元素和未来元素
所以对于这个，改变
$('.test').click(function(){ alert("I've been clicked!") });
至
$(document).on('click','.test',function(){ alert("I've been clicked!") });