jQuery - 为新元素使用现有的处理程序

Question

我用'onchange'处理程序创建了带有输入的表来进行数学运算.例如:

jQuery(<selector will find many elements>).keyup(function (){do something})

现在我想要.append新表元素时出现问题.他们不响应keyup ...有没有办法自动绑定新元素(我使用.clone)与现有的.keyup(或任何其他事件)？

Answer 1

您应该使用事件委派.事件委托利用事件" 气泡 "通过DOM的事实,这意味着许多元素接收其后代元素之一的事件的通知.

使用jQuery,这更容易,因为它可以平滑事件处理和事件冒泡的一些跨浏览器不一致性.

现在,假设您要将事件处理程序绑定到表中的每一行.一种直接但低效的处理方法是将事件处理程序绑定到每一行.这实际上就是你现在正在做的事情.相反,想象一下,你将一个处理程序绑定到表,并说" 嘿,只要我的某个行发生某些事情就调用这个处理程序 ".这就是事件授权的全部内容.使用jQuery 1.7,事件处理接口已经过重构,并且更加一致.以下是如何绑定此类处理程序的示例:

$('table.math').on(
  /*
   * This first argument is a map (object) of events and their corresponding
   * event handlers, like so: {eventName: eventHandler ([e]) {})
   */
  {
    keyup: function doMath (e) {
      // Your event handling code here. 
      // "this" refers to the input where the keyUp-event occured
    }
  },
  /* This argument is a selector, and reads: 
   * 'For table with class "math", bind to the events listed above
   * whenever a corresponding event occurs on an input with class
   * "mathInput"
   */
  'input.mathInput'
);

事件委派的另一个好处是它符合您的标准" 当我想要.append新表元素时会出现问题.它们不响应keyup ".使用事件委派,这将自动适用于与选择器匹配的所有后代,无论它们是在绑定处理程序时是否存在,还是稍后动态插入.

总结一下,事件授权:

• 效率更高.绑定单个处理程序而不是许多处理程序
• 适用于动态插入的元素