4

假设我有一些要添加 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 个事件。处理这个问题的最佳方法是什么？

4

5 回答 5

8

您可以像这样将 $.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 委托给目标元素。

更新

我建议您将$.on所有其他方法用于所有事件处理目的，因为所有其他方法都通过$.on和$.off引擎盖下的方法。

从 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您至少可以保存一个函数调用，尽管在大多数情况下这并不重要。

于 2012-05-31T04:48:26.370 回答
4

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

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

代替body你可以使用所有.test已经属于 DOM 的容器。

了解更多.on()

你也可以.delegate()像下面这样使用：

$('#container').delegate('.test', 'click', function() {
   // your code
});
于 2012-05-31T04:48:19.790 回答
1

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

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

于 2012-05-31T04:51:39.020 回答
0

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

$(".container").on("click", ".test", function(){
    alert("You clicked me!");   
});
于 2012-05-31T04:48:47.947 回答
0

因为当您向 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!")
});
于 2012-05-31T04:49:00.347 回答