Why does my rating automatically repeat itself?

Sep 8, 2013 at 6:34 PM
I just installed this plugin for a mobile bootstrap site I am building, but when I insert the rateit class to my html, it duplicates the plugin.

Any ideas on why this would be happening?

A simple <span class="rateit></span> line turns into this when inspected on my browser
<!-- Star Rating -->
<span class="rateit"><button id="rateit-reset-2" class="rateit-reset" aria-controls="rateit-range-2" aria-label="reset rating"></button><span id="rateit-range-2" class="rateit-range" aria-valuenow="1.5" aria-valuemax="5" aria-valuemin="0" aria-owns="rateit-reset-2" aria-label="rating" role="slider" tabindex="0" style="width: 80px; height: 16px;" aria-readonly="false"><span class="rateit-selected" style="height: 16px; width: 24px; display: block;"></span><span class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span></span><button id="rateit-reset-2" class="rateit-reset" aria-controls="rateit-range-2" aria-label="reset rating"></button><span id="rateit-range-2" class="rateit-range" aria-valuenow="1.5" aria-valuemax="5" aria-valuemin="0" aria-owns="rateit-reset-2" aria-label="rating" role="slider" tabindex="0" style="width: 80px; height: 16px;" aria-readonly="false"><span class="rateit-selected" style="height: 16px; width: 24px; display: block;"></span><span class="rateit-hover" style="height: 16px; width: 0px; display: none;"></span></span></span>
  <!-- End Rating -->
```
Sep 9, 2013 at 7:55 AM
What I guess that happens, is that rateit gets initialized before bootstrap starts doing funky stuff on the page.

My suggestion is to take over the initialization of rateit (change the "rateit" class name to something else, so it doesn't auto-initialize), and then after bootstrap gets initialized call $('.NEWCLASSNAME').rateit();