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

Question

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

Есть ли примеры, учебные пособия или исходный код? Я мог бы посмотреть на что-то, что использует какой-либо интерактив внутри загрузочного 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 
} 

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 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> 

Answer 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); 
     });