jquery 通过html方法增加对象后hover失效怎办？

1.$("#msg").html($("#msg").html()+inner);
其实不是失效了，而是dom树改变了，#msg 里面的内容改变，就不是原来的 .list 了

2.$("#msg").append($(inner);
新加入的 $(inner) ，不在原本的 $('.list') 集合里，因此新加入的没有被绑定事件

我这给出两种做法：
① 在 #msg 内容改变后，给新加入 .list 绑定一次 hover；
② 将事件绑在 $(document) 上，例：
$(document).on('mouseover','.list',function(){
//...
});
不过方法②貌似没有hover写法。

仅供参考~

	$(function(){
		$("#button").click(function(event) {
			var inner = "
ef
";
			$("#msg").append(inner);
		});
		$("#msg").on('mouseover', ".list", function(event) {
			$(this).css("background","#F00");
		}).on('mouseout', ".list", function(event) {
			$(this).css("background","#0F3");
		});
	})
	function test(sign){alert(sign);}

jQuery(function($) {
    $("#button").click(function() 
    {
        var inner = '
ef
';
        $("div#msg").html($("div#msg").html() + inner);
    });
    
    $('div#msg').delegate("li.list", "mouseover mouseout", function(e) {
    	if (e.type == 'mouseover')
        {
	    	$(this).css("background", "#F00");
        } 
    	else if (e.type == 'mouseout')
    	{
        	$(this).css("background", "#0F3");
		}
    });
});



	
	
		

			a
			b
		

		

			e
			f