jquery:将新的动态元素绑定(bind)到已定义的函数

Question

在我的页面上有

$(function()
{
  $('.load').click(function()
  { 
  var val =  $(this).attr('value'); //get value of the button that called this function
  //do stuff});
});

以及在初始 html 上定义的一些按钮:

<input type="button" value="getData1" class="load" />

如果我稍后添加更多同一类的动态按钮，并希望它们以相同的方式操作，我如何将它们绑定(bind)到原始函数？

我正在查看.on，但它似乎定义了一个新函数。我希望有一种方法可以使用已经定义的方法。

或者我应该单独定义该函数并从两个地方调用它？如果是这样，我如何传递调用该​​函数的元素作为参数？

非常感谢任何帮助。

Answer 1

正如您提到的，这就是 on 的用途。打开允许您将监听器附加到包含要监视的元素的文档部分。

$(document).on('click', '.load', function() { 
    var val =  $(this).attr('value');
});

使用 document 并不是最好的选择，因此理想情况下，您可以在其中放置一些选择器，该选择器将与当前和将来的所有按钮周围的元素相匹配。

调用 on 后在 document 中添加的按钮也将触发此处理程序，即使它们是稍后添加的。