jquery 对新元素使用现有处理程序

plupiseo  于 2022-11-29  发布在  jQuery
关注(0)|答案(1)|浏览(123)

我已经创建了一个表,其中包含onchange处理程序输入,以便进行一些数学运算;例如:

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

现在当我想要.append新的表元素时有一个问题。它们不响应keyup...有没有一种方法可以自动绑定新元素(我使用.clone)和现有的.keyup(或任何其他事件)?

pgpifvop

pgpifvop1#

您应该使用event delegation。事件委派利用了事件“冒泡”通过DOM这一事实,这意味着许多元素都会收到它的一个后代元素的事件通知。
使用jQuery,这就更容易了,因为它消除了事件处理和事件冒泡的一些跨浏览器不一致性。
现在,假设您希望将一个事件处理程序绑定到表中的每一行。一种直接但效率低下的处理方法是将一个事件处理程序绑定到每一行。这就是您现在正在做的事情。设想一下,您将一个处理程序绑定到表,然后说“*Hey,每当我的行中有什么事情发生时就调用这个处理程序 *".这就是事件委托的全部内容.使用jQuery1.7,用于事件处理的接口已经被重构并且变得更加一致。2下面是一个如何绑定这样一个处理程序的例子:

$('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'
);

事件委托的另一个好处是它满足了您的条件“* 当我想追加新的表元素时出现了问题。它们不响应keyup*"。通过事件委托,这将自动适用于与选择器匹配的所有后代,无论它们是在绑定处理程序时出现的,还是稍后动态插入的。
总而言之,事件委派:

*更有效率。您系结单一行程常式,而非多个行程常式
*适用于动态插入的元素

相关问题