在开发带迷你购物车功能的页面时，我们经常会通过ajax请求把商品列表动态插入到页面中。如果一开始用jQuery的bind或者直接写click去绑定事件，往往会发现后来加进来的删除按钮、加减数量按钮怎么点都没反应。这是因为这些元素在绑定事件时还不存在于DOM里，所以监听器根本没有挂上去。
为什么普通绑定会失效
jQuery里像下面这样的写法，只会给当时已经存在的元素绑定事件：
// 假设.mini-cart-item是动态生成的
$('.mini-cart-item .del-btn').click(function() {
// 删除商品逻辑
$(this).parent().remove();
});
当迷你购物车的商品是用户操作后才知道的，上面的代码执行时页面里还没有这些节点，自然就绑定不上。等节点被插入，点击也不会触发任何函数。
用on方法做事件委托
解决思路是把事件监听放到一个永远不会被替换的父容器上，利用事件冒泡来捕获动态子元素的操作。jQuery的on方法支持这种写法：
// .mini-cart是静态存在的容器
$('.mini-cart').on('click', '.del-btn', function() {
// 这里的this指向被点击的.del-btn
$(this).closest('.mini-cart-item').remove();
updateCartCount();
});
// 数量加一按钮也用同样方式委托
$('.mini-cart').on('click', '.add-btn', function() {
var item = $(this).closest('.mini-cart-item');
var num = parseInt(item.find('.num').text(), 10);
item.find('.num').text(num + 1);
updateCartCount();
});
function updateCartCount() {
var count = $('.mini-cart-item').length;
$('.cart-count').text(count);
}
这样无论迷你购物车里的商品是何时被动态加载进来的，只要它们放在.mini-cart里面，点击事件都能被正确捕获。
动态加载示例
下面模拟从接口拿到数据后渲染迷你购物车的过程：
// 模拟ajax返回数据后插入DOM
function loadCartData(list) {
var html = '';
for (var i = 0; i < list.length; i++) {
html += '<div class="mini-cart-item">' +
'<span class="name">' + list[i].name + '</span>' +
'<span class="num">1</span>' +
'<button class="add-btn">+</button>' +
'<button class="del-btn">删除</button>' +
'</div>';
}
// 静态容器内部内容可替换，但容器本身不变
$('.mini-cart').html(html);
}
// 假设从ipipp.com接口获取
var mockList = [{name: '鼠标'}, {name: '键盘'}];
loadCartData(mockList);
注意事项
- 事件委托的父级必须是在绑定时就已经存在的静态元素，不要选也会动态替换的节点。
- 如果页面里用了iframe或者多个文档，需要确认选择器在对应的document上调用on。
- 旧版本jQuery里的live方法也可以实现类似效果，但性能差且已废弃，推荐统一用on。
总结：动态加载内容导致jQuery事件失效，本质是绑定时机不对。改用on做事件委托，是处理迷你购物车这类动态交互最稳妥的做法。