Raty.js not loading once infinite scroll occurs in Rails

Question

I'm using the infinite scroll option from Masonry-rails and am implementing a rating system via Raty.js. When the first few pins show up, the average rating is shown, however, after infinite scroll, the new pins do not have average ratings. Attached is my index.html.haml. How do I allow raty.js to show average ratings on new pins from infinite scroll?

Here's a link to my staging site: http://instapin.herokuapp.com/ (scroll down to the bottom)

index.html.haml:

#pins.transitions-enabled.infinite-scroll
  - @pins.each_with_index do |pin, i|
    .box.panel.panel-default
        = link_to (image_tag pin.image.url), pin
        .panel-body
            %h2= link_to pin.title, pin
            %p.user
            Submitted by
            = link_to pin.user.name, user_path("id" => pin.user.id)
        .panel-footer
            .btn-group.pull-left
                %div{class: "srating", dscore: @avg_reviews[i] }
            .btn-group.pull-right
                - if user_signed_in?
                    - if current_user.voted_for? pin
                        = link_to unlike_pin_path(pin), method: :put, class: "btn btn-default vote", data: { type: :json } do
                            %span.glyphicon.glyphicon-heart
                                =pin.get_upvotes.size
                    - else
                        = link_to like_pin_path(pin), method: :put, class: "btn btn-default vote", data: { type: :json } do
                            %span.glyphicon.glyphicon-heart
                                =pin.get_upvotes.size
                - else
                    = link_to like_pin_path(pin), method: :put, class: "btn btn-default" do
                        %span.glyphicon.glyphicon-heart
                            =pin.get_upvotes.size
  #page-nav.container
    = will_paginate @pins, renderer: BootstrapPagination::Rails, previous_label: "Newer", next_label: "Older", class: "paginate"

  :javascript
    $('.srating').raty({
        path: '/assets/',
        readOnly: true,
        score: function() {
            return $(this).attr('dscore');
        }
    });
    $(function(){

      var $container = $('#pins');

      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.box',
          columnWidth: 10
        });
      });

      $container.infinitescroll({
        navSelector  : '#page-nav',    // selector for the paged navigation
        nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pins',
            img: 'http://i.imgur.com/6RMhx.gif'
          }
        },
        // trigger Masonry as a callback
        function( newElements ) {
          // hide new items while they are loading
          var $newElems = $( newElements ).css({ opacity: 0 });
          // ensure that images load before adding to masonry layout
          $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
          });
        }
      );

    });

Answer 1

I've solved what the issue was. I needed to add in raty.js to load after the infinite scroll occurs. The resulting javascript should be:

:javascript
    $('.srating').raty({
        path: '/assets/',
        readOnly: true,
        score: function() {
            return $(this).attr('dscore');
        }
    });
    $(function(){

      var $container = $('#pins');

      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.box',
          columnWidth: 10
        });
      });

      $container.infinitescroll({
        navSelector  : '#page-nav',    // selector for the paged navigation
        nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pins',
            img: 'http://i.imgur.com/6RMhx.gif'
          }
        },
        // trigger Masonry as a callback
        function( newElements ) {
          // hide new items while they are loading
          var $newElems = $( newElements ).css({ opacity: 0 });
          // ensure that images load before adding to masonry layout
          $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
                    $('.srating').raty({
        path: '/assets/',
        readOnly: true,
        score: function() {
            return $(this).attr('dscore');
        }
    });
          $('.srating').raty('reload');

          });
        }
      );

    });