JSFiddle - React, Tailwind, and code Playground

by gugahoi

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://bootstrapdocs.com/v2.1.0/docs/assets/css/bootstrap.css">
<script src="https://raw.github.com/wbotelhos/raty/master/js/jquery.raty.min.js"></script>
<br /><br />
Added Jquery Raty.<br/>
This is working (click on any number) ->
<div class="ratings" data-rating="1"></div>
<br/><br/> <p>I've added same ratings class in popup. But alert() function is not working in popover windows</p>

<div class="link-container">
	<a href="#" data-title="Title 1">Click Here</a>
	<div class="popover-content" style="display:none;">
        <div class="ratings" data-rating="1"></div>
    	<p>Some content 1</p>
    	<button type="button" class="btn" data-toggle="button">Show Details</button>
    	<button type="button" class="btn" data-toggle="button">Add To Queue</button>
	</div>
</div>

<br /><br /><br /><br />
<div class="link-container">
	<a href="#" data-title="Title 2">Hover Here</a>
	<div class="popover-content" style="display:none;">
    	<p>Some content 2</p>
    	<button type="button" class="btn" data-toggle="button">Show Details</button>
    	<button type="button" class="btn" data-toggle="button">Add To Queue</button>
	</div>
</div>

JavaScript

$('.link-container a').popover({
    content : function() { return $(this).siblings('.popover-content').html(); },
    trigger: 'click',
    html: true
}).click(function(){
  $('.ratings').raty({
    click: function(score, evt) {
        alert(score);
    }
  });
});

$('.ratings').raty({
    click: function(score, evt) {
        alert(score);
    }
});