za pomocą elementów interaktywnych wewnątrz popover bootstrap

Question

Z powodzeniem używam popover bootstrap na kliknięcie łącza. Mam kilka elementów formularza w popover: pole tekstowe, pole wyboru i przycisk. Jestem w stanie dołączyć detektor klawiszy za pomocą jquery.live(), ale wewnątrz tego przycisku odbiornika nie mam żadnego dostępu do poprawnych elementów formularza. Istnieją one, jeśli prześledzę je w logu konsoli, ale ich wartości zawsze pozostają pierwotnymi wartościami domyślnymi, więc jeśli przejdę do $ ("# txtComment"). Val(); ciąg jest zawsze taki sam, niezależnie od tego, co wstawiam na pole.

Czy są jakieś przykłady, tutoriale lub kod źródłowy, na który mogłem spojrzeć w przypadku czegoś, co używa jakiejkolwiek interaktywności wewnątrz popover bootstrap?

to jak mam konfigurowania 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)); 

wtedy robię to z powodzeniem pokazać go:

this.commentLink.popover('show'); 

i to jest funkcja przycisku kliknięcie:

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

Answer 1

Yay! domyśliłam się. Dlaczego, och dlaczego nie jest to udokumentowane? Tęsknię za pracą w actionscript.

Ten kod musi być wyświetlany, gdy popover jest rzeczywiście widoczny, ponieważ elementy nie istnieją, gdy nie są widoczne.

-Oh, a użycie jquery.live() jest przestarzałe, ale można użyć tej zmiennej $ tip, aby uzyskać odniesienie do przycisku po utworzeniu popover.

Answer 2

Zmieniono składnię. Odpowiedź Kalin C Ringkvist musi być lekko zmodyfikowane:

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

Uwaga metoda tip() zamiast $tip.

Answer 3

Dla zmiennej liczbie przycisków/linki, które mają wydarzenia zbindowanych, oto jak to zrobiłem (dzieje się to, co zostało odebrane wcześniej):

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

Kiedyś inny trik, aby móc dołączyć funkcje do elementy w popover. Właśnie dodałem kolejny detektor kliknięcia na elemencie wyświetlającym popover. W detektorze kliknięć uruchamiana jest funkcja z pewnym czasem oczekiwania (na przykład 500 milisekund). Po uruchomieniu funkcji powinieneś mieć dostęp do elementów popover. Oto kod:

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