click не срабатывает

486

29 декабря 2016, 08:51

Отображаются звездочки рейтинга пользователя, при наведении курсора содержимое блока с id edit_user_rating меняется на пустые звездочки с class span_rating. При клике на звездочку берется data rating и дальше будет обрабатываться.

А если курсор убрать из блока содержимое блока вернется (звездочки с рейтингом)

Если курсор завести сверху то click не работает

<!doctype html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
	 
	<style>		 
		#edit_user_rating { 
			text-align: center; 
			width: 200px; 
			background: #000; 
			height: 50px; 
		} 
		 
		.rating_star { 
			unicode-bidi: bidi-override; 
			direction: rtl; 
			transition: 0.2s; 
			color: #737373; 
		} 
		.rating_star > span { 
			display: inline-block; 
			position: relative; 
			font-size: 25px; 
			height: 0.1px; 
			transition: 0.2s; 
			 
		} 
		.rating_star > span:hover:before, 
		.rating_star > span:hover ~ span:before { 
			content: "\2605"; 
			position: absolute; 
			color: #FEDF69; 
			transition: 0.2s; 
		} 
 
		.star_select { 
			color: #FEDF69!important; 
		} 
	</style> 
</head> 
<body> 
	<div id="edit_user_rating"> 
		<div class="rating_star"> 
			<span>&#9734;</span><span>&#9734;</span><span>&#9734;</span><span class="star_select">&#9733;</span><span class="star_select">&#9733;</span> 
		</div> 
	</div> 
	 
	<script> 
		$("body").on("mouseenter", "#edit_user_rating", function(){ 
			$("#edit_user_rating").html('<div class="rating_star"><span class="click" data-id="5">&#9734;</span><span class="click" data-id="4">&#9734;</span><span class="click" data-id="3">&#9734;</span><span class="click" data-id="2">&#9734;</span><span class="click" data-id="1">&#9734;</span></div>'); 
		}); 
		 
		$("body").on("mouseleave", "#edit_user_rating", function(){ 
			$("#edit_user_rating").html('<div class="rating_star"><span>&#9734;</span><span>&#9734;</span><span>&#9734;</span><span class="star_select">&#9733;</span><span class="star_select">&#9733;</span></div>'); 
		}); 
		 
		$("body").on("click", ".click", function(event){ 
			event.stopPropagation(); 
			var id = $(this).data('id'); 
			alert(id); 
		}); 
	</script> 
	 
</body> 
</html>