I have a list of (Drupal) teasers that have a read more link after each one, and separate divs of the full complete text I need to show when the read more link is clicked, following the links.
Here's the JS:
- $('.comment-teaser').each(function(){
- $(this).next('a.read-more-link').andSelf().wrapAll('<div class="teaser-n-link"/>');
- });
- $('a.read-more-link').live("click",function(e) {
- e.preventDefault();
- $(this).parent('.teaser-n-link').slideUp(400,function(){
- $(this).parent().parent().find('.show-text').slideDown(400);
- });
- });.
- $('.ll-comment-teaser').ajaxComplete().each(function(e){
- //e.preventDefault();
- $(this).next('a.views-more-link').andSelf().wrapAll('<div class="teaser-n-link"/>');
- });
The slideUp/slideDown action I want works fine when the page first loads, but after an ajax pager at the bottom of the list is used, it no longer works. I'm wrapping the read more link and the teaser together and that's what breaks. I can see after I use the pager, I don't see any "teaser-n-link" classes anymore. I'm using ".live" to keep the "click" events going, but how can I do the same for the ".each" and/or the ".wrapAll"? I don't even know which one, or both, is the problem.