Some practice for ajax bootstrap popovers

ajax.popovers.js

var $popovers = $(Settings.popovers);

function loadPopoverContent( $self, $target ) {
    var $clone = $target.clone(1).css('display', 'block');
    var href = $self.attr('href');

    if( href.length > 1 ) {
        $target.remove();

        $.ajax({
            type: 'POST',
            url: href,
            data: {is_ajax : 'Y'},
            success: function(response) {
                $clone.append(response);
            }
        });
    }

    return $clone;
}

$popovers.each(function(index, el) {
    var $self = $(this);

    $(this).on('click', function(event) {
        event.preventDefault();
    });

    var popProps = {
        placement: $self.data('placement') || 'bottom'
    };

    var target = $self.data('content-target') || '';
    var $target = $( target );

    if( $target.length ) {
        popProps = {
            html: true,
            content: function() {
                return loadPopoverContent($self, $target);
            },
        }
    }

    var $popover = $self.popover(popProps);
});

/**
 * Close button in popover content
 */
 $(document).on("click", ".popover .close" , function(){
    $(this).parents(".popover").popover('hide');
});

/**
 * Hide all the Popovers if clicked on button or inside popover
 */
 $(document).on("click", function (e) {
    var $target = $(e.target);
    var isPopover = $target.is('[data-toggle="popover"]'),
    inPopover = $target.closest('.popover').length > 0

    if (!isPopover && !inPopover) $popovers.popover('hide');
});