Question

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

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

现在我想要.append新表元素时出现问题。他们没有回应关键... 有没有办法自动绑定新元素（我使用.clone）与现有的.keyup（或任何其他事件）？

Answer 1

您应该使用event delegation。事件委托通过bubbles利用事件“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 ”。使用事件委派，这将自动适用于与选择器匹配的所有后代，无论它们是在绑定处理程序时是否存在，还是稍后动态插入。

总结一下，事件授权：

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

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

1 个答案: