Использование интерактивных элементов внутри загрузочного popover

Я успешно использую bootstrap popover для ссылки. У меня есть элементы формы внутри popover: текстовое поле, флажок и кнопка. Я могу подключить прослушиватель кнопок с помощью jquery.live(), но внутри этого прослушивателя кнопок у меня нет никакого доступа к правильным элементам формы. Они существуют, если я их отслеживаю в журнале консоли, но их значения всегда остаются исходными значениями по умолчанию, поэтому, если я иду $('# txtComment'). Val(); строка всегда одна и та же, независимо от того, что я помещаю в поле.

Есть ли какие-либо примеры, учебники или исходный код, на которые я мог бы смотреть, что-то, что использует какой-либо интерактив внутри загрузочного popover?

вот как я настраиваю popover:

this.commentLink.popover({
  trigger: 'manual',
  placement: 'right',
  html : true,
  content: function () {
    return $('#commentPopout').html();
  }
}).popover('hide');

//jquery.on won't work here so we use live
$('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick));

то я делаю это, чтобы успешно показать его:

this.commentLink.popover('show');

и это функция нажатия кнопки:

commentSubmitClick: function(e){
  console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field
}

Ответы

Ответ 1

Синтаксис изменен. Ответ Kalin C Ringkvist должен быть слегка изменен:

var popover = this.commentLink.data('popover').tip();

Обратите внимание на метод tip() вместо $tip.

Ответ 2

Ура! догадаться. Почему, о, почему это не документировано? Я пропускаю работу в ActionScript.

var popover = this.commentLink.data('popover').$tip;
var comment = popover.find('#txtComment').val();//gives correct string

Этот код должен быть запущен во время видимости popover, поскольку элементы не существуют, когда они не видны.

-Oh, а использование jquery.live() устарело, но вы можете использовать эту переменную $tip, чтобы получить ссылку на кнопку вместо этого после создания popover.

Ответ 3

Для переменного количества кнопок/ссылок, привязанных к событиям, здесь, как я это сделал (отключая ранее ответ):

var list = $('<ul/>');
myCollections.items.each(function(item){
    var row = $('<li/>');
    row.append(item.get('id')));
    row.append($('<a/>').addClass('delete').html('remove'));
    list.append(row);
});

$(this.el).find('a').popover({ content: list }).on('click', function(){
    var popover = $(this).data('popover').tip();
    $(popover).find('.delete').on('click', removeitem);
});

function removeitem(){ // code to remove the item here }

// The HTML (in the popover) would look like this:
<ul>
    <li>1<a class="delete">remove</a></li>
    <li>2<a class="delete">remove</a></li>
    <li>3<a class="delete">remove</a></li>
</ul>

Ответ 4

Я использовал еще один трюк, чтобы иметь возможность прикреплять функции к элементам в popover. Я просто добавил еще один прослушиватель кликов на элемент, который отображает popover. В прослушивателе кликов запускается функция с некоторым таймаутом (например, 500 миллисекунд). После запуска функции вы можете получить доступ к своим элементам popover. Вот код:

        <!-------- HTML ----------->
        <a class="btn" id="popover_btn">show popover</a>

        /******* JAVASCRIPT *******/
        $('#popover_btn').popover({
            html: true,
            placement: 'top',
            trigger: 'click',
            title: 'add new value',
            content: '<input id="ttt" type="text"/>'
        });

        $('#popover_btn').click(function() {
            setTimeout(function() {
                // here you can write your "ON SHOW" code
                console.debug($('#ttt').length);        // Outputs 1 - the element is there
            }, 500);
        });