web-dev-qa-db-fra.com

Comment lier bootstrap popover sur des éléments dynamiques

J'utilise le popover de Twitter Bootstrap sur la liste dynamique. L'élément de la liste a un bouton, lorsque je clique sur le bouton, il devrait apparaître popover. Cela fonctionne bien lorsque j'ai testé sur non dynamique.

c'est mon JavaScript pour la liste non dynamique

$("button[rel=popover]").popover({ 
    placement : 'right',
    container : 'body',
    html : true,
    //content:" <div style='color:red'>This is your div content</div>"
    content: function() {
      return $('#popover-content').html();
    }

    })
    .click(function(e) {
        e.preventDefault();
});

Cependant, cela ne fonctionne pas bien sur une liste dynamique. Il peut apparaître lorsque je clique sur le bouton "deux fois" et affiche uniquement l'un des éléments de la liste pour lequel je clique pour la première fois.

Mon html:

 <ul id="project-list" class="nav nav-list">
   <li class='project-name'>
     <a >project name 1
         <button class="pop-function" rel="popover" ></button>
     </a>
   </li>
   <li class='project-name'>
     <a>project name 2
        <button class="pop-function" rel="popover" ></button>
     </a>
   </li>

 </ul>

<div id="popover-content" style="display:none">
    <button class="pop-sync"></button>
    <button class="pop-delete"></button>
</div>

Mon JavaScript pour dynamique:

$(document).on("click", "#project-list li" , function(){
   var username = $.cookie("username");
   var projectName = $(this).text()
   $("li.active").removeClass("active");
   $(this).addClass("active");
   console.log("username: " +username + " project name: "+projectName );
});


$(document).on("click", "button[rel=popover]", function(){
    $(this).popover({ 
       placement : 'right',
       container : 'body',
       html : true,
    content: function() {
       return $('#popover-content').html();
        }

    }).click(function(e){
    e.preventDefault();
    })

});


//for close other popover when one popover button click
$(document).on("click", "button[rel=popover]" , function(){

        $("button[rel=popover]").not(this).popover('hide');
 });

J'ai cherché des problèmes similaires, mais je ne trouve toujours pas celui qui résoud mon problème. Si quelqu'un a des idées, s'il vous plaît faites le moi savoir. Merci votre aide.

javascriptjquerydomtwitter-bootstrappopover
47
user2150267

Mettre à jour

Si votre popover doit avoir un sélecteur cohérent, vous pouvez utiliser la propriété selector du constructeur popover.

var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    html: true,
    selector: '[rel="popover"]', //Sepcify the selector here
    content: function () {
        return $('#popover-content').html();
    }
}

$('body').popover(popOverSettings);

Démo

D'autres moyens:

  1. ( Standard Way ) Liez à nouveau le popover aux nouveaux éléments insérés. Enregistrez les popoversettings dans une variable externe.
  2. Utilisation Mutation Event/Mutation Observer pour identifier si un élément particulier a été inséré dans le ul ou un élément.

La source

var popOverSettings = { //Save the setting for later use as well
    placement: 'bottom',
    container: 'body',
    html: true,
    //content:" <div style='color:red'>This is your div content</div>"
    content: function () {
        return $('#popover-content').html();
    }

}

$('ul').on('DOMNodeInserted', function () { //listed for new items inserted onto ul
    $(event.target).popover(popOverSettings);
});

$("button[rel=popover]").popover(popOverSettings);
$('.pop-Add').click(function () {
    $('ul').append("<li class='project-name'>     <a>project name 2        <button class='pop-function' rel='popover'></button>     </a>   </li>");
});

Mais il n'est pas recommandé d'utiliser DOMNodeInserted Mutation Event pour les problèmes de performances et de support. Cela a été obsolète également. Votre meilleur choix serait donc de sauvegarder le paramètre et de le lier après la mise à jour avec le nouvel élément.

démo

Une autre méthode recommandée consiste à utiliser MutationObserver à la place de MutationEvent selon MDN, mais encore une fois, la prise en charge de certains navigateurs est inconnue et les performances préoccupantes.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        $(mutation.addedNodes).popover(popOverSettings);
    });
});

// configuration of the observer:
var config = {
     attributes: true, 
     childList: true, 
     characterData: true
};

// pass in the target node, as well as the observer options
observer.observe($('ul')[0], config);

démo

83
PSL

Probablement beaucoup trop tard mais c'est une autre option:

 $('body').popover({
    selector: '[rel=popover]',
    trigger: 'hover',
    html: true,
    content: function () {
        return $(this).parents('.row').first().find('.metaContainer').html();
    }
});
11
Cipriano

J'ai fait ça et ça marche pour moi. "contenu" est l'objet placesContent. pas le contenu html!

var placesContent = $('#placescontent');
$('#places').popover({
        trigger: "click",
        placement: "bottom",
        container: 'body',
        html : true,
        content : placesContent,
    });

$('#places').on('shown.bs.popover', function(){
  $('#addPlaceBtn').on('click', addPlace);
}

<div id="placescontent"><div id="addPlaceBtn">Add</div></div>
6
nurp

essayez ce code HTML

<a href="#" data-toggle="popover" data-popover-target="#popover-content-1">Do Popover 1</a>
<a href="#" data-toggle="popover" data-popover-target="#popover-content-2">Do Popover</a>

<div id="popover-content-1" style="display: none">Content 1</div>
<div id="popover-content-2" style="display: none">Content 2</div>

jQuery:

$(function() {
  $('[data-toggle="popover"]').each(function(i, obj) {
    var popover_target = $(this).data('popover-target');
    $(this).popover({
        html: true,
        trigger: 'focus',
        placement: 'right',
        content: function(obj) {
            return $(popover_target).html();
        }
    });
  });
});

espérons que cela vous aidera, codage heureux!

2
Somwang Souksavatd