• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

JQuery text(...) or html(...) set text, but then it immediately vanishes

With the code below, setting the div to .text("saved") or .html("saved") momentarily displays the "saved" text, but then it immediately reverts back to the previous text. The same is true if there is no previous text.

How do I get the contents of the div to stay with the new value?

 
<!DOCTYPE html>
 <html>                                                                  
 <head>                                                                  
 <script type="text/javascript" src="JQuery/jquery-1.6.4.min.js"></script>          
 <script type="text/javascript">
     $(document).ready(function () {
         $("a").click(function () {
             $("#savedMessage").text("Saved");
         });
     });                                    
 </script>                                                               
 </head>                                                                 
 <body>           
                                                   
    <a href="">Link</a>          
    <div id="savedMessage">hello</div>  
                                
 </body>                                                                 
 </html>

Open in new window

0
purplesoup
Asked:
purplesoup
  • 2
2 Solutions
 
ansudhindraCommented:
replace

<a href="">Link</a>    

with

<a href="#">Link</a>    
0
 
ansudhindraCommented:
here is the example

http://jsfiddle.net/CKK4V/1/

BR-Sudhindra-www.clicksperday.com
0
 
Gurvinder Pal SinghCommented:
or check this also
<!DOCTYPE html>
 <html>                                                                  
 <head>                                                                  
	<script src="jquery-1.4.2.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         $("a").click(function () {
             $("#savedMessage").text("Saved");
         });
     });                                    
 </script>                               
 <style>
	a
	{
		color:blue;
		text-decoration:underline;
	}
 </style>
 </head>                                                                 
 <body>           
                                                   
    <a>Link</a>          
    <div id="savedMessage">hello</div>  
                                
 </body>                                                                 
 </html>

Open in new window

0
 
purplesoupAuthor Commented:
ansudhindra - yep - it is loading the page again, that or a javascript:return false will fix it - thanks.

ansudhindra - jsFiddle looks useful, but it doesn't actually seem to work for me - sorry. I click on the link and nothing happens.

gurvinder372 - nice, you can just respond to clicks on links without having any href defined... thanks !

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now