twitter bootstrap popover on ajax loaded content

Question

I am trying to assign popover from twitter bootstrap to an element which is loaded via ajax and I have this:

        $(document).on("click", ".checkRezolvataTrecut", function(event){
        switch(dataCheckTrecut[1]) {
            case '02': 
                var luna = "Februarie";
                break;
        }
        $(".checkRezolvataTrecut").popover({
            placement: "top",
            content: "<button class='btn btn-default mutaTrecut' style='width: 100px;'>" + luna + "</button><button class='btn btn-default mutaCurent' style='width: 100px;'>Luna curenta</button>",
            html: true

        });
    });

The problem is that on first click nothing happens. After the first click it works. As a mention, I didn't understood bootstrap js too well. Any ideas?

Answer 1

It's normal that on the first click nothing happens, because it's on the first click that you are setting the popover, once set (in the first click) the popover will show in the next clicks,

if you want it to show on the first click you should set the popover when jquery is ready :

$( document ).ready(function() {
   switch(dataCheckTrecut[1]) {
        case '02': 
            var luna = "Februarie";
            break;
    }
    $(".checkRezolvataTrecut").popover({
        placement: "top",
        content: "<button class='btn btn-default mutaTrecut' style='width: 100px;'>" + luna + "</button><button class='btn btn-default mutaCurent' style='width: 100px;'>Luna curenta</button>",
        html: true

    });
});