Bootstrap popover только один раз для нескольких позиций

Question

У меня есть таблица на моем сайте. Я хотел бы дать пользователю возможность легко добавлять комментарии к каждой строке.

Для этого я нашел красивый просмотр комментариев в Интернете.

вот пример:

<div class="popover-markup"> 
    <a href="#" class="trigger btn btn-default" data-placement="right">Popover link</a> 
    <div class="content hide"> 
    code 
    </div> 

</div> 


$('.popover-markup>.trigger').popover({ 
    html: true, 
    title: function() { 
    return $(this).parent().find('.head').html(); 
    }, 
    content: function() { 
    return $(this).parent().find('.content').html(); 
    } 
}); 

http://jsfiddle.net/dzr521qs/424/

В основном это именно то, что я хотел бы иметь. Но ... Мне нужна форма внутри комментария комментариев для отправки данных на мой сервер. И так как у меня около 50-300 записей в таблице, это создаст тонну кода, если мне нужно поместить код для popover для каждой отдельной строки.

поэтому мой вопрос:

возможно определить поповер раз и показывают всегда один и тот же поповер, но с разным содержанием для каждой строки?

Я хотел бы иметь маленькую иконку в каждой строке, в которой я могу открыть popover и передать идентификатор popover для загрузки динамического содержимого.

надеюсь, у кого-то есть идея.

благодарит

Answer 1

Вы можете добавить дополнительный атрибут к вашему поповер ссылке (скажем data-target), что будет указывать на элемент, который вы хотите отобразить в качестве содержимого.

Вы можете извлечь data значение атрибута внутри content() callback и использовать его для отображения различного контента.

Пример:

// inside popover(...) 
content: function() { 
    var contentSelector = $(this).data("target"); 
    if (contentSelector && $(contentSelector).length > 0) { 
     return $(contentSelector).html(); 
    } else { 
     return "<div class='alert alert-warning'>Please specify data-target attribute pointing to element in page</div>"; 
    } 
} 

// in your trigger add `data-target` attribute 
<a ... data-target=".content">... 

Вот updated fiddle демонстрирует, что решение