小码农

#jQuery动态添加节点后,动作失效 jQuery给大家带来很大的方便来操作DOM,当jQuery动态添加节点时,原有的事件将会失效,无法触发.

例如:

$li = $('ul li:first-child').remove();
$('ul').append($li);

原事件绑定为:

$('li').on('mouserenter',function(){
   $(this).find('div').animate({       'opacity':'0.8'
   },500); 
});

在动态截取添加后,虽然使用了on函数,但是并没有使用on函数的事件委托,导致事件仍然不能触发,因此,将on函数更改如下:

$('ul').on('mouserenter','li',function(){
   $(this).find('div').animate({       'opacity':'0.8'
   },500); 
});

将li的事件委托给不易改变的对象,就不会出现事件失效的情况发生了.

样式失效: 

使用jquery为我们操作DOM提供了非常大的便利,比如添加删除标签及内容

$(a).append(b);

有时在IE浏览器下,只能显示标签而样式全部丢失,查找后在append后使用trigger('create'),重新加载样式表,即可解决:

        $('#id').triger('create');