Bootstrap popover doesn't trigger on elements just added to the DOM

[Test123]

I'm showing an icon when I hover over a div. And on clicking that icon, I want to show a popover. For some reason, the popover doesn't trigger at all.My HTML:\[code\]<div class="kpi"> <p>this is the kpi</p></div>\[/code\]My JavaScript:\[code\]$('.kpi').live('mouseenter', function(e) { $(this).find('p:first').append('<span class="gear" style="margin-left: 10px; position: absolute;"><i class="icon-cog"></i></span>'); }); $('.kpi').live('mouseleave', function(e) { $('.gear').remove(); }); $('.gear').popover({ title:"titke", content:"click me", trigger:"click" });$('.gear').live('click', function(e) { alert('clicked the gear'); });\[/code\]Any noob mistake I might be doing?Here is the fiddle.