添加事件，阿贾克斯附加内容 [英] Adding events to ajax appended content

问题描述

让我们说我有一些链接，我想一个JavaScript动作添加到：

Let's say I have some of links that I want to add a javascript action to:

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

在我的网页加载我给他们所有的点击事件：

When my page loads I give them all a click event:

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

但让我们说，后来我添加其他元素，我想给它同样的事件。我不能做到这一点：

but let's say afterward I add another element and I want to give it the same event. I can't do this:

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

因为这样的话前3将对他们2个事件。什么是解决这一问题的最佳方法是什么？

because then the first 3 will have 2 events on them. What's the best way to deal with this?

推荐答案

您可以绑定$。对一个父元素，将永远存在于DOM是这样的。

You can bind the $.on to a parent element that will always exist in dom like this.

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

需要注意的是： 您可以替换文件的元素的任何父，将永远存在于DOM和家长越近越好。

Note that: You can replace document with any parent of the element that will always exist in dom, and the closer the parent the better.

简单事件与绑定点击不会工作作为点击的事件处理程序绑定到已经在存在于DOM元素结合的时间。因此它为动态地添加到通过Ajax的或以后的jQuery DOM元素不起作用。为了这个目的，你必须使用事件委派。您还可以使用 $。在用于这一目的。

Simple event binding with click wont work as click bind the event handlers to elements that already exists in dom at the time of binding. And hence it doesn't work for elements dynamically added to dom later through Ajax or jQuery. For that purpose you have to use event delegation. And you can use $.on for that purpose.

检查 $。对

您可以使用 $。生活但是$住的是德preciated。使用$。对代替。的$。对为$ .live和$ .delegate它做同样的事情等效语法

You can use $.live but $live is depreciated. use $.on instead. Equivalent syntax of $.on for $.live and $.delegate which does the same thing

$(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+

在这种情况下，事件处理程序将被绑定到文件。而事件将被委派的jQuery在这种情况下，以目标元素测试类。

In this case event handler will be bound to document. And events will be delegated to target element by jQuery in this case test class.

更新

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

I would suggest you to use $.on for all event handling purposes as all other methods routes through $.on and $.off method under the hood.

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

Check the definition of these functions from jQuery source 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 );
} 

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

And that is true for these convenient events handlers too

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

您可以看到所有的方法都在和 $。关闭自己使用 $。因此，使用 $。在你至少可以节省函数调用，虽​​然这是不是显著在大多数情况下。

You can see all methods are using $.on and $.off themselves. So using $.on you can at least save a function call though which isn't that significant in most of the cases.

这篇关于添加事件，阿贾克斯附加内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！