Click here to Skip to main content
13,148,889 members (52,759 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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
Updated 14-Nov-12 5:27am
RaisKazi34.6K
v2
Comments
Christian Graus 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 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 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
Top Experts
Last 24hrsThis month


Advertise | Privacy |
Web03 | 2.8.170924.2 | Last Updated 14 Nov 2012
Copyright © CodeProject, 1999-2017
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