JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<button type="button" class="btn btn-default item-instances" data-container="body" data-toggle="popover">
  Popover on bottom
</button>

CSS

body {
    padding: 20px;
}

JavaScript

$('.item-instances').popover({
    trigger: 'click',
    placement: 'bottom',
    title: 'Title',
    html: true,
    content: function(){
        var toReturn = []; 
        $('.item-instances').each(function(k, v){
            toReturn[k] = '<a href="#" class="instance-image-'+ k +'">Abc</a>';
        });
        return toReturn; 
    }
});

$(document).on('shown.bs.popover', reBindListeners);

function reBindListeners() {
    $('a[class^="instance-image-"]').each(function(index, el) {
        $(this).unbind().on('click', function(event) {
            event.preventDefault();
            console.log('test');
        });
    });
}

$( document ).ajaxComplete(reBindListeners);