Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Why Does My Jquery Click Function Only Work Once?

This is a discussion on Why Does My Jquery Click Function Only Work Once?, within the Javascript section. This forum and the thread "Why Does My Jquery Click Function Only Work Once?" are both part of the Frameworks category.

 
 Reply to this topicStart new topic
> Why Does My Jquery Click Function Only Work Once?, It seems upon clicking this it works... but then after doing this it..
cosmicbdog
post Jul 3 2008, 08:56 PM
Post #1


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Here is the link to start the show
CODE
<a  onClick="showDebug(<? echo $rowbooked['uID']; ?>);">[?]</a>


Here is the script to start the dancers
CODE
<script type="text/javascript">
  
   function showDebug(uID) {
  
          
  
         $j.ajax({
             type: "GET",
               url: "showBookingDebug.php",
               cache: false,
               data: "uID=" + uID,
               success: function(html){
                 $j("#showDebug" + uID).replaceWith(html);
                 $j("#showDebug" + uID).show("fast");
               }
         });  
    }    
    
    
    
$j(document).ready(function()
{
     $j("#debugger").click(function()
     {
         $j(this).hide("slow");
     });
    
    
});
</script>


Here is the div where it happens
CODE
                         <div id="debugger">
                         <div style="display: none; margin-left: 75px; margin-top: 9px; width: 888px; clear: both;" id="showDebug<? echo $rowbooked['uID']; ?>">
                            
                         </div>
                         </div>



Long play short, the idea is that the <div> #debugger pulls out some debugging information on the fly. Then on clicking it, it dissapears. That is OK. Works a treat. However, when I click on my fancy little question mark link again to do it all over, well, it just doesn't do anything. NOT ENTIRELY TRUE, as in the console of my firebug, it says that its retrieved the file, but it just doesn't display it on screen. Like it got locked down in hide().

Any ideas?

This post has been edited by cosmicbdog: Jul 3 2008, 08:56 PM
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 3 2008, 10:25 PM
Post #2


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
It would appear your problem lies here

CODE
$j("#showDebug" + uID).replaceWith(html);


You are placing the whole element with the text sent back from the ajax call and next time, there is *no* #showDebug element on the page to replace.

Try using

CODE
$j("#showDebug" + uID).html(html);


Which will replace the content of the element but not the element itself.


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 4 2008, 12:29 AM
Post #3


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
QUOTE (Rakuli @ Jul 4 2008, 01:25 PM) *
Which will replace the content of the element but not the element itself.


Doesn't that just make perfect sense now? smile.gif I made that change and it worked... I can now show and hide that element over and over again for hours.

Can you help me understand though how I have multiple divs with #debugger id and why the hide function I'm using only works for the first one?

CODE
$j(document).ready(function()
{
     $j("#debugger").click(function()
     {
         $j(this).hide("slow");
     });
    
    
});



My understanding is that this function would apply to anything that has id="debugger" and when clicked, would hide.... but it seems it only works for the first div that has this id on the page and not after.

This post has been edited by cosmicbdog: Jul 4 2008, 12:30 AM
Go to the top of the page
 
+Quote Post
Rakuli
post Jul 4 2008, 12:34 AM
Post #4


Squeeze Machine
Group Icon

Posts: 766
Joined: 13-February 08
From: Catching the squeezed drips downunder.
Id's need to be unique on the page. They are ID's after all biggrin.gif

If you want to do it for multiple divs do it on a per class basis.

give all the divs you need a class of "debugger" and get them with

CODE
$j(".debugger").click(function () {$j(this).hide(); });


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
cosmicbdog
post Jul 4 2008, 01:50 AM
Post #5


Rapid Squeezer
****

Posts: 146
Joined: 3-July 08
Is that right... wow... that would make sense why most of the things I'm trying don't work.

Yep, this surely did the trick... my app is coming along so nicely.

Thank you boss. i-m_so_happy.gif
Go to the top of the page
 
+Quote Post
« Next Oldest · Javascript · Next Newest »
 
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
 Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   12 gribble 556 19th February 2008 - 05:49 AM
Last post by: welshstew
No New Posts   8 Mark 270 11th March 2008 - 05:37 PM
Last post by: delusion
No New Posts   11 Jason 503 19th March 2008 - 06:57 PM
Last post by: Monie
No New Posts   1 Jason 296 21st May 2008 - 11:49 AM
Last post by: paintingtheweb
No New Posts   1 Jason 190 26th March 2008 - 08:22 PM
Last post by: christopher