jQuery script doesn't work first time round

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

jQuery script doesn't work first time round

Post by social_experiment »

The code below is what i currently have; it changes the color of the link (and adds padding) by using jQuery's css() function. The problem is that it doesn't work once the page is loaded; i have to click it once (it turns into 'Hide') and when i click it again, the styling is applied. After this the styling seems to function like it should. Any ideas on why the styling isn't applied when the pages loads?

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.min.js" ></script>
<script>
$(document).ready(function() {
    $('a.more').click(function() {
	   $('a.more').text('Hide'); 	      
	   $('a.more').click(function() {			
			if ($(this).text() == 'Hide') {
				$(this).text('Show');				
				$(this).css({
					backgroundColor: '#006',
					padding: '1%',
				});
			}
			else {				
				$(this).text('Hide');	
				$(this).css({					
					backgroundColor: '#f00',
					padding: '1%',
				});				
			}
		});      
    });
});
</script>
</head>

<body>
<a href="#" class="more">Show</a>
</body>
</html>
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
phpHappy
Forum Commoner
Posts: 33
Joined: Wed Oct 26, 2011 1:58 pm

Re: jQuery script doesn't work first time round

Post by phpHappy »

Code: Select all

$('a.more').click(function() {
it's a click function
phpHappy
Forum Commoner
Posts: 33
Joined: Wed Oct 26, 2011 1:58 pm

Re: jQuery script doesn't work first time round

Post by phpHappy »

Code: Select all


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="js/jquery-1.7.1.js" ></script>
<script>
$(document).ready(function() {
    $('a.more').click(function() {
         
                     
                        if ($(this).text() == 'Hide') {
                                $(this).text('Show');                          
                                $(this).css({
                                        backgroundColor: '#006',
                                        padding: '1%',
                                });
                        }
                        else {                         
                                $(this).text('Hide');  
                                $(this).css({                                  
                                        backgroundColor: '#f00',
                                        padding: '1%',
                                });                            
                        }
                   
    });
});
</script>
</head>

<body>
<a href="#" class="more">Show</a>
</body>
</html>

User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: jQuery script doesn't work first time round

Post by social_experiment »

Thanks, i had to add styling to the link to get it to display in the initial state but it works now :)

Edit
I also made my initial function into 2 functions because the hide part is relevant to the script and it's still working
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
phpHappy
Forum Commoner
Posts: 33
Joined: Wed Oct 26, 2011 1:58 pm

Re: jQuery script doesn't work first time round

Post by phpHappy »

good deal
I should have elaborated better - a click function wrapped in a click function
Post Reply