Question

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:

<div class="kpi">
    <p>this is the kpi</p>
</div>

My JavaScript:

$('.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');    
});

Any noob mistake I might be doing?

Here is the fiddle.

Answer 1

The popover is initialized on non existing element.

$('.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>');

    //Call the popover after creation of gear
    $('.gear').popover({
        title:"titke",
        content:"click me",
        trigger:"click"
    });

});

    $('.kpi').live('mouseleave', function(e) {
        $('.gear').remove();
    });


$('.gear').live('click', function(e) {
    alert('clicked the gear');    
});

Demo: Fiddle

You need to call the $('.gear').popover({...}) after the .gear element is created and appended to the dom (after $(this).find('p:first').append(...))