解决Ajax局部刷新导致JS事件重复绑定的问题

Ajax局部刷新引发的事件重复绑定问题

当页面中存在通过Ajax动态更新的列表时，必须谨慎处理那些不随数据更新而重新渲染的静态部分的事件逻辑。

考虑一个包含公共工具栏的列表界面场景：

| Menu1 | Menu2

----------------------------------------------------------------------------

ID TITLE DESCRIPTION OPERATION

1 test1 hey test X - ...

2 test2 why not X - ...

----------------------------------------------------------------------------

$.ajax( 
.... 
data: { ... 
}, 
success: function(data) { 
$('Menu1').click( 
function(){ 
//do something 
} 
); 
} 
)

由于Menu1所在的界面区域是公共部分，不会随着列表数据的刷新而重新载入DOM，这会导致之前绑定的事件监听器未被清除，从而在多次更新列表后产生重复的click事件触发。

因此，在Ajax列表更新的结果处理函数中，严禁包含对工具栏等静态元素事件侦听器的重新初始化操作，以避免事件被多次绑定。