jquery原生事件不响应,该怎么处理

jquery原生事件不响应



<html>

	<title>index</title>

	<head>

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<meta content="text/html;charset=utf-8" http-equiv="content-type"/>

		<link rel="stylesheet" href="resources/css/flexslider.css" type="text/css" media="screen" />

		<link href="resources/css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />

		<script src="resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>

		<script src="resources/js/jquery.mobile-1.3.2.js" type="text/javascript"></script>

		<script src="resources/js/jquery.flexslider.js"></script>

		<link rel="stylesheet" href="resources/css/demo.css" type="text/css" media="screen" />

		<style>

			*{padding: 0;margin: 0}

			.left{ float: left;width: 50%;position: relative; }

			.right{ float: right; width: 50%;position: relative;}

			.left img{position: absolute; width: 100%;height: 100%}

			.right img{position: absolute;width: 100%;height: 100%}

			.parent{background: #000000;padding: 0px!important;}


		</style>

	</head>

	<body>


			<div id="container" data-content="header">

			<div class="flexslider">

			    <ul class="slides">

			    	<li>

			    		<img src="resources/images/inacup_donut.jpg" />

			    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>

			    	</li>

			    	<li>

			    		<a href="http://flex.madebymufffin.com"><img src="resources/images/inacup_pumpkin.jpg" /></a>

			    		<p class="flex-caption">This image is wrapped in a link!</p>

			    	</li>

			    	<li>

			    		<img src="resources/images/inacup_donut.jpg" />

			    	</li>

			    	<li>

			    		<img src="resources/images/inacup_vanilla.jpg" />

			    	</li>

			    </ul>

		  </div>

	    	</div>

	  	

	  		<div class="parent">


		    </div>

		<script type="text/javascript">

		var allwidth = $(window).width();

		var current_img;

		$(window).load(function() {

			current_img = allwidth/2;

			$('.flexslider').flexslider();

			for (var i=0; i < 6; i++) {

			  if(i%2===0){

			  	$('.parent').append('<div class="left" style="height:'+current_img+'px"></div>');

			  	$('.parent').append('<div class="right" style="height:'+current_img/2+'px"></div>');

			 	

			  }else{

			  	$('.parent').append('<div class="right" style="height:'+current_img+'px"></div>');

			  	$('.parent').append('<div class="left" style="height:'+current_img/2+'px"></div>');

			  	

			  }  

			};

			$('.left').each(function(index) {

			  $(this).append('<img id="hihi" src="resources/images/fullscreen.JPG" />');

			});


			$('.right').each(function(index) {

			  $(this).append('<img id="hihi" src="resources/images/fullscreen.JPG" />');

			});

		});

		$(window).resize(function() {

		  $('.left').each(function(index) {

		  	current_img = $(this).width();

		  	

		  	var current_background = $(this).css("background-color");

			if(index%2==0){	

				$(this).css("height",current_img);

			}else{

				$(this).css("height",current_img/2);		

			}

			$(this).css("background",current_background);

		  });

		  $('.right').each(function(index) {

		  	var current = $(this).width();

		  	current_background = $(this).css("background-color");

			if(index%2==0){

				$(this).css("height",current_img/2);

				$(this).css("background",current_background);

			}else{

				$(this).css("height",current_img);

				$(this).css("background",current_background);

			}

		  });

		});


		$('#hihi').click(function(){

  			console.log(current_img);

  			$(this).animate({

	        height:current_img*0.75,width:current_img*0.75,

	        left:$(this).width()/8,

	        top:$(this).height()/8

	     },1000);

		});

	</script>

	</body>

</html>