jquery动态添加的元素绑定的事件不生效的问题

我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决。

原因，一般情况下，我们是通过 $('#xxx').click(callback) 这种形式去绑定，这种绑定之所以生效是因为，我们程序加载 $(function(){}) 的时候绑定了回调，而动态添加上去的，我们并没有去绑定。

所以动态添加的元素，点击的时候并不会触发我们想要的效果。但是实际上，在我们点击的时候，还是产生了点击事件，只是这个事件没有被我们的预期回调处理，因为我们的回调没有和这个元素关联起来。

jquery 的事件处理函数中，回调的第一个参数就是事件，我们打印一下这个事件，就可以知道，这个事件包含了产生该事件的目标 html 元素。

$('.level').change(function(e){window.e = e;})
console.log(e);

并且我们也知道，事件是会冒泡的，也就是说，如果我们添加的元素没有绑定事件，没有捕获事件，它就会冒泡，看它上一级是否有捕获，然后一直到 body->document->html 这些元素。

也就是说，我们动态添加的元素，产生的事件可以在他们父级的元素上获取，比如：

$(document).on('click', '#xxx', function(){
   // 事件处理函数 
});

这样一来，我们动态添加的元素，虽然本身没有绑定处理函数，但是会在他们的父级元素捕获并处理了。