jQuery关于当前对象在绑定事件结束前已不存在的疑问

已注销
  • 258
$(document).on('click', '#JS_btn1', function(e) {
      var self = $(this);
      setTimeout(function(){
        self.parent('div').html('<a href="javascript:void(0);" class="btn_ok" id="JS_btn2">确定</a>');
      });
    })

点击#JS_btn1后查找父节点 div 并替换子节点按钮为#JS_btn2,就是说在监听事件结束前就把btn1给消灭了替换成btn2,假如不加setTimeout则在IE7/8报错(其他浏览器没有),为什么加上setTimeout就没事?

回复
阅读 3.5k
2 个回答

不加setTimeout时为单线程操作,相当于在执行事件的过程中(事件的作用域还未结束)事件的触发主体已经失效,该线程中事件上下文的完整性被破坏,这会在IE特定版本中报错,而其它浏览器则予以静默(可以视为一种优化)。

加setTimeout的话,代码中处理dom的过程被分离到一个单独的线程中执行,事件在主线程中没有破坏,可以成功完成,而dom处理则在另一个线程中去完成它的生命周期。(PS,一般来说,dom处理相对于js本身是一个很慢的操作,处理结果不会反映到即时完成的主线程中)

建议点击#JS_btn1后只是隐藏掉#JS_btn1,然后显示#JS_btn2,尽量减少js对dom的修改。

宣传栏