slideToggle executing twice in one call

Question

I can't show a live example at this point, but i don't see how the slideToggle is being called twice. it is called on click of a link.

here:

// initialize the jquery code
 $(function(){
  $('div.slideToggle a').click(function(){
   $(this).parent().siblings('div.remaining-comments').slideToggle('slow',function(){ //'this' becomes the remaining-comments.
    var hidden = $(this).siblings('div.slideToggle').find('input').val();
    if($(this).siblings('div.slideToggle').find('a').html().substr(0,4) == 'Show'){
     $(this).siblings('div.slideToggle').find('a').html('Hide comments');
    }
    else {
     $(this).siblings('div.slideToggle').find('a').html(hidden);
    }
   });
  });
 });

it is meant to display and hide extra comments on a blog page. however, it is displaying and then hiding in one click. I have put an alert in both the 'if' and 'else' and both appear, so how is it invoked twice?

obviously when the link contains the text 'Show' it reveals the hidden div, and when clicked again it will not find 'Show' and will therefore hide the div. The funny thing is, it was working absolutely perfectly. It's on the company intranet so i suppose maybe something else could be affecting it, but i really don't see how.

Answer 1

It is possible that your document ready is called more than once, when page reinitializes, best thing to do is to unbind the click event before binding a new one to it.

this way you avoid having the click event bound twice on 1 element

try this:

$('div.slideToggle a').unbind('click').click(function(){
  // your code here
});