using jquery toggle with infinite scroll

I am trying to use a toggle jQuery script (shown below) to show/hide a list of comments. The script works well, however, after implementing an infinite scroll function, the script repeats the "showtext" on the previous posts (ie. after 3 loads of the next posts with infinite scroll there will be 3 copies of "(show)").

I realize this is because of the "append" line in the script, however when I comment this out and make a link on the page with class="toggleLink" the content does not toggle. The text of the link DOES change to the hideText though, so I am wondering why the content is not appearing. Thanks for any help!

$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='show';
var hideText='hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();开发者_如何学Python

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

I created a work around for this problem. Although it may not be the most efficient way of doing things.

Add this line above the append() line:

$('.toggleLink').remove();

This removes all the toggleLink elements so that when the infinite scroll runs and calls the toggle script the showText can be reinserted (eliminating duplicates).