<div id=”1″>1</div>
<div id=”2″>2</div>
</div>
<div class=”dialog”>
<div id=”1″>1</div>
<div id=”2″>2</div>
</div>
…
</div>
我们用思路一写出的代码可能是这样：
<script type=”text/javascript”>
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
$(document).bind(‘click’,function(){
$(‘.dialog’).css(‘display’,’none’);
});
$(‘.dialog’).bind(‘click’,function(e){
stopPropagation(e);
});
</script>
看起来简单依旧的样子，但是我们仔细想想就会发现问题，我们在每个dialog上都绑定了类似的方法，维护如此多的click事件处理程序对内存来说绝对是可开销，导致我们页面运行缓慢。而且如果我们可以动态使用ajax创建新dialog问题又来了，新创建的dialog不能实现隐藏功能！因为绑定函数已经执行完了，不会再为新的dialog绑定click事件处理程序，我们只能自己来做此事。也就是说思路一无法把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为它是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。
