Bootstrap popover replicating code

Question

I am using raty to perform the rating functionality and I am showing it inside a popover.

The problem is that the first time I click on the link, it correctly create the stars but, when I click for the second time, the stars are replicated, so it popups 10 stars instead of 5.

$('#member1').popover({
    html: true,
    placement: 'bottom',
    content: function() {
        return $($(this).data('contentwrapper')).html();
    }
}).click(function() {
    $('.star').each(function(el) {
        $(this).raty({
            starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
            starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
            start: $(this).attr('data-rating')
        });
    });
});

I replicate the error in this fiddle.

Can anyone let me know how to fix this, and, therefore, only show 5 stars?

Thanks!!!!

Answer 1

I am not overly familiar with raty, but it seems like you need to destroy the existing before running the code a second, or third time.

$(this).raty('destroy');

something like that, check the raty doc for the exact implimentation

Answer 2

please review this code

$('#member1').popover({
        html: true,
        placement: 'bottom',
        content: function() {
            return $($(this).data('contentwrapper')).html();
        }
    }).click(function() {
        $('.star').each(function(el) {
          $(this).raty('destroy');
            $(this).raty({

                starOff : 'http://wbotelhos.com/raty/lib/images/star-off.png',
                starOn : 'http://wbotelhos.com/raty/lib/images/star-on.png',
                start: $(this).attr('data-rating')
            });

        });
    });

Demo :http://jsfiddle.net/x9WhH/3/