javascript - Bootstrap popover destroy & recreate works only every second time

Question

I want to programmatically destroy & recreate a specific Bootstrap popover. So what I do is:

$('#popoverspan').popover('destroy');
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'});

And it works every second time only. I thought that it's the matter of the time it takes to destroy the popover, but even adding a delay between the two lines doesn't help. I recreated the problem in JSFiddle: http://jsfiddle.net/Lfp9ssd0/10/

Why is it like that? It has been suggested that it works, e.g. in Twitter Bootstrap Popover with dynamically generated content via ajax and Bootstrap Popover Reinitialization (To refresh Content)

It works just fine when I skip the destroying, but I am not sure what happens when I create another popover for an element without destroying the already existing one. Is it reinitialised or does it create a new popover with losing the access to the old one?

Answer 1

Solved it myself. Apparently .popover('destroy') is asynchronous, and immediate creation of another popover fails, while the previous one is being destroyed. I tried adding delay by using alert, which failed for some reason. Using setTimeout() before creating new popover is not the most elegant, but working solution:

$('#popoverspan').popover('destroy');
setTimeout(function () {
    $('#popoverspan').popover({
        placement : 'bottom', 
        trigger : 'hover', 
        content : 'Here is new popover!'
    });
}, 200);

200 ms seems enough, but it may need finetuning in other cases.