小弟求助JQuery事件的问题

[lr84418839y]

我用jQuery插件写了一个页面打算实现如下功能
1、打开页面默认有4个DIV和一个添加按钮
2、鼠标移到DIV上能在DIV里面的右上角弹出一个X（鼠标移除后消失）用来关闭DIV，
3、单机添加按钮能在页面添加一个DIV
现在这三个都实现了 不过如果通过添加按钮添加的DIV右上角的X直接就出现了 虽然可以关闭DIV 但是会一直显示 鼠标滑过事件失效了

[a756375788]

function moused(){
     $(".small").hover(
            function()
            {
                //$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
                $(this).children("div.delete").stop().animate({top: 0}, 700, "easeOutBounce");
                $(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
            },
            function(){
                //$(this).children("img").stop().animate({opacity: 1}, 700);
                $(this).children("div.delete").stop().animate({top: -60}, 500);
                $(this).children("div.desc").stop().animate({bottom: -40}, 400);
            }
            );
     
    $(".delete, .desc").hover(
            function()
            {
                $(this).stop().animate({backgroundColor: "#333"}, 70, "easeOutSine");
            },
            function(){
                $(this).stop().animate({backgroundColor: "#000"}, 7);
            }
            );
}
moused();
$(document).on("click", ".add", function(event) {
      brick = "<div class='brick small'><div class='delete'>X</div><div class='desc'>2014-11-11</div></div> ";
      event.preventDefault();
      event.preventDefault();
      event.stopPropagation();
      $('.gridly').append(brick);
      moused();
      return $('.gridly').gridly();
    });

[qcxl]

贴下代码看看

[lr84418839y]

页面

<div style="margin-left: 80%;"  >

		        <p class='actions'>
		          <a class='add button' href='#'>十</a>
		        </p>

</div>
    <div class='content'>
      <section class='example'>
        <div class='gridly'>
        	
        	

		<div class='brick small'>
				<div class="delete">X</div>       	 
       		 <div class="desc">2014-11-11</div>
		</div>
		

鼠标移动的js

$(".small").hover(
			function()
			{
				//$(this).children("img").stop().animate({opacity: 0.8}, 700, "easeInSine");
				$(this).children("div.delete").stop().animate({top: 0}, 700, "easeOutBounce");
				$(this).children("div.desc").stop().animate({bottom: 0}, 700, "easeOutBounce");
			},
			function(){
				//$(this).children("img").stop().animate({opacity: 1}, 700);
				$(this).children("div.delete").stop().animate({top: -60}, 500);
				$(this).children("div.desc").stop().animate({bottom: -40}, 400);
			}
			);
	
	$(".delete, .desc").hover(
			function()
			{
				$(this).stop().animate({backgroundColor: "#333"}, 70, "easeOutSine");
			},
			function(){
				$(this).stop().animate({backgroundColor: "#000"}, 7);
			}
			);

添加按钮的js

$(document).on("click", ".add", function(event) {
	  brick = "<div class='brick small'><div class='delete'>X</div><div class='desc'>2014-11-11</div></div> ";
      event.preventDefault();
      event.preventDefault();
      event.stopPropagation();
      $('.gridly').append(brick);
      return $('.gridly').gridly();
    });

[qcxl]

按照那三个条件做了个小demo，楼主参考下吧

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">

function bindE(){
	$(".small").hover(
            function()
            {
                $(this).children("div.delete").show(); 
            },
            function(){
                $(this).children("div.delete").hide();
            }
      );
	$(".delete").click(function(){
		$(this).parent().hide();
	});
}

$(document).ready(function(){
	bindE();
});
	function add(){
		var brick = "<div class='brick small'><div class='delete'>X</div><div class='desc'>2014-11-11</div></div>";
		$(".gridly").append(brick);
		bindE();
	}
	
</script>
<style>
	.delete{
		display:none;
	}
	.desc{
		margin:50 0;
		position:fixed;
		background:grey;
	}
	.brick{
		width:100px;
		height:100px;
		border:1px solid black;
	}
</style>
<head/>
<body>
<button onclick="add();">show</button>
	<div class='gridly'>
        <div class='brick small'>
                <div class="delete">X</div>            
                <div class="desc">2014-11-11</div>
        </div>	
		<div class='brick small'>
                <div class="delete">X</div>            
                <div class="desc">2014-11-11</div>
        </div>	
		<div class='brick small'>
                <div class="delete">X</div>            
                <div class="desc">2014-11-11</div>
        </div>	
	</div>
	
</body>
</html>