如何使用jQuery同时为静态与动态元素绑定事件处理函数？

嘿，这个问题我太熟了！当然可以用单条jQuery语句搞定静态和动态元素的事件绑定——核心就是利用事件委托（event delegation）的特性，它能同时覆盖页面加载时就存在的静态元素，以及后来动态生成的元素。

为什么你的原有写法会有问题？ #

你原来的代码里，$('.save_form').on('click', testFun)只能给页面加载时已经存在的.save_form元素绑定事件，而通过showElement动态生成的那个按钮，因为是后续添加到DOM里的，不会自动带上这个事件绑定。

单条语句实现的解决方案 #

事件委托的思路是：把事件绑定到一个在页面加载时就存在的父级元素（比如document，或者更贴近目标元素的容器，性能更好），然后通过指定目标选择器，让父元素监听冒泡上来的事件，只要触发事件的元素匹配选择器，就执行处理函数。这样不管元素是静态还是动态生成的，都能被捕获到。

针对你的场景，单条绑定语句可以写成这样：

$(document).on('click', '.save_form', testFun);

完整的示例代码 #

把这个语句替换掉你原来的$('.save_form').on('click',testFun);，完整代码如下：

$('.show_new').on('click', showElement);

function showElement() {
  $('#test').append("<input type='button' id='dynamic' class='save_form' value='Save'>");
}

// 单条语句搞定静态+动态元素的点击绑定
$(document).on('click', '.save_form', testFun);

function testFun() {
  // 这里写你的处理逻辑，比如：
  console.log('Save按钮被点击了！');
}

额外小提示 #

如果#test容器是页面加载时就存在的，把事件绑定到#test而不是document会更好，因为事件冒泡的层级更少，性能更优：

$('#test').on('click', '.save_form', testFun);

内容的提问来源于stack exchange，提问作者espresso_coffee