jscroll loaded elements not able to process js file called in the header

I have a project running on codeigniter where I am using a jscroll for infinite scrolling. I was using a js file called rotator.js to flash comments on each of the posts. When my home controller runs index function it calls a loadpost() function in the same controller which calls the posts view. the home controller is as follows

$count = 2;     
$pg = 1;

    $this->load->view('header');
    $this->load->view('nav', $data);
    $this->load->view('login', $data);

    $this->loadpost($pg,$count);
    $this->load->view('footer');

The loadpost() function takes the parameters $pg-> page number and $count-> number of posts per page. function calls the posts.php view which display each posts returned by it one below the other and the end of the posts.php view has the anchor link used by the jscroll as follows

<div class='pager'>     
    <a href="<?php $pg++;
                echo base_url('index.php/home/loadpost/' . $pg) ?>" class='next-selector'></a>      
</div>

Each of the posts has multiple comments which display one by one and are managed by the rotate.js file which has the following code

(function($){
$.fn.extend({ 
    rotaterator: function(options) {

        var defaults = {
            fadeSpeed: 500,
            pauseSpeed: 500,
            child:null
        };

        var options = $.extend(defaults, options);

        return this.each(function() {
              var o =options;
              var obj = $(this);                
              var items = $(obj.children(), obj);
              items.each(function() {$(this).hide();})
              if(!o.child){var next = $(obj).children(':first');
              }else{var next = o.child;
              }


              $(next).fadeIn(o.fadeSpeed, function() {
                        $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                            var next = $(this).next();
                            if (next.length == 0){
                                    next = $(obj).children(':first');
                            }
                            $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
                        })
                    });
            });
        }
    });
})(jQuery);

 $(document).ready(function() {
        $('.rotate').rotaterator({fadeSpeed:500, pauseSpeed:2000});
 });

Now, if I include the rotate.js file in the header, the comments aren't able to flash at all from the second page post onwards(in this case the third post onwards) and when i place the same script in the posts.php view it gets called multiple times with each page load and hence has an erratic behavior in the previous posts, e.g if i load three pages, the first two pages call the function multiple times and show undesired results(flashing faster and displayiong more than one comment at a time) whereas the comments in the third page posts flash properly.

What could I be doing wrong here. If the page is calling the script multiple times when placed thcript in the view then why isn't it able to use the script when it is called from the header. Any help would be appreciated.