Hinzufügen von verschiedenen Twitter-Bootstrap-Popovers zu dynamisch erstellten Elementen

Question

Ich versuche, dynamisch erstellten Elementen Popover hinzuzufügen. Jede Art von Element (entweder ein ContentEditable oder ein Img oder ein Video) muss einen anderen Popover-Inhalt haben.

Denn sie sind dynamische Elemente, ich rufe die popovers wie folgt:

$('body').popover({ 
      selector: '[rel=popoverImage]', 
      content: **popoverImage**, 
      html: true, 
      placement: 'top', 
      trigger: 'focus' 
     }); 

Wo popoverImage eine Variable, die den Inhalt des popover für das img-Element hat.

Das Problem tritt auf, wenn ich versuche, ein weiteres Popover hinzuzufügen. Es zeigt nicht. Ich habe folgendes versucht:

1. Mit 2 Selektoren und Aufruf in verschiedenen $('body')popover({...}) Funktionen.
2. Ändern des Elements body in einen dynamisch generierten Container.
3. Ändern der Variable, die die Daten "Inhalt" jedes Mal ein neues Element konzentriert hat.

Irgendwelche Ideen?

Answer 1

Was Sie brauchen, ist, wenn Sie ein neues Steuerelement hinzufügen die popover zugleich hinzu:

function AddNewElement() 
{ 
    var yourElement = '<div id="yourElementId"> The element you want </div>'; 
    $('divToAppend').append(youElement); 

    var yourPopoverContent = 'Your Personalized popover'; 

    $('#yourElementId').popover({ 
     html : true, 
     content : yourPopoverContent  
    }); 

} 

Dies sollte für die popover mit Ihrem tatsächlichen Code arbeiten.