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

你可以将$ .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。在这种情况下，事件将被jQuery委托给目标元素test类。

<强>更新

我建议您将$.on用于所有事件处理目的，因为所有其他方法都会通过$.on和$.off方法进行路由。

从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 );
}

对于这些方便的事件处理程序也是如此

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

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

详细了解 .on()

您还可以使用 .delegate() ，如下所示：

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

Answer 3

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

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

Answer 4

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

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

Answer 5

因为当您向DOM注入新内容时（通过ajax或javascript），现有绑定将无效。您必须重新绑定事件或使用jQuery on，这将适用于当前元素和未来元素

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

所以对于这个，改变

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

到

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

将事件添加到附加的ajax内容

5 个答案: