Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS Ajax
Hi, after load div block via ajax, style don't work.
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery Example</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
	
	<div id="posts">
		
		<div class="post">
			Some text here
			<span style="float:left"><a href="#">коментувати</a></span>
			<span id="settings"><a href="#">редагувати</a> | <a href="#">видалити</a></span>
			<br /><br />
			<hr>
		</div>
		
		<div class="post" style="">
			Some text here
			<span style="float:left"><a href="#">коментувати</a></span>
			<span id="settings"><a href="#">редагувати</a> | <a href="#">видалити</a></span>
			<br /><br />
			<hr>
		</div>
		
	</div>
	
	<div id="loadMore">Load more</div>
	
	<style type="text/css">
		#settings {
			float:right; 
			display: none;
		}
	</style>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	
	<script type="text/javascript">
		$('#loadMore').click(function() {
			$('#posts').append('<div class="post" style="">Some text here<span style="float:left"><a href="#">коментувати</a></span>		<span id="settings"><a href="#">редагувати</a> | <a href="#">видалити</a></span><br /><br /><hr></div>');
		});
		
	    $(function () {
	        $('.post').mouseover(function () {//mouseover method for post class div
	            $(this).find('span').css('display', 'inline'); 
                    //select span of post class div
	        }).mouseout(function () {
	            $('.post #settings').css('display', 'none');
                    //select span of post class div
	        });
        
        });
        
	</script>
</body>
</html>
Posted 14-Nov-12 4:39am
Lubomur313
Edited 14-Nov-12 5:27am
RaisKazi32.9K
v2
Comments
Christian Graus at 14-Nov-12 10:43am
   
What is wrong exactly ? Do you mean that your mouseover doesn't work any more ? I note you're not consistent in setting style="", why even do that ?
Lubomur at 14-Nov-12 10:46am
   
yes

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

The issue is you are not using .live to bind your mouseover and mouseout events. Refer to this link for api reference - http://api.jquery.com/live/[^]. Check out the following where the issue is fixed:
 
http://jsfiddle.net/s6T3g/[^]
 
Hope this helps!
  Permalink  
v2
Comments
Lubomur at 14-Nov-12 13:52pm
   
It's work, thank you.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 392
1 CPallini 365
2 Sergey Alexandrovich Kryukov 348
3 BillWoodruff 264
4 George Jonsson 255
0 OriginalGriff 5,095
1 CPallini 4,285
2 Sergey Alexandrovich Kryukov 3,767
3 George Jonsson 2,941
4 Gihan Liyanage 2,386


Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 14 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100