bootstrap popover changer le contenu dynamicment

Click me First bouton représente un achat dans la vie réelle; sur ce clic, product_buy_now() est déclenché .. il remplit les tableaux suivants:

 news_from_to number_of_news news_price_data 

après que les données soient définies, inbox_open() est déclenché et définit les atsortingbuts title et data-content de popover .. cela devrait fonctionner .. exemple de code qui n’utilise pas de tableaux remplis dynamicment: https://jsfiddle.net/HopeLess/0gbcatL3/ vérifiez-le juste pour voir comment le résultat devrait ressembler. Merci pour toute aide à l’avance (:

  Click Me First inbox   // inbox var inbox = document.getElementById("inbox"); var inbox_news = document.getElementById("inbox_news"); var poH = document.createElement("span"); var poC = document.createElement("span"); var news_from_to = []; var number_of_news = []; var news_price_data = []; // inbox.open function inbox_open(news_from_to, number_of_news, news_price_data) { console.log("Opening Executed!"); console.log(""); console.log("Craft Data:"); console.log(news_from_to); console.log(number_of_news); console.log(news_price_data); console.log(""); for(var i = 0; i < news_from_to.length; i++) { // create header/content components var b = document.createElement("button"); var c = document.createElement("span"); b.innerHTML = (i + 1); b.className = "poH"; c.className = "poC"; c.style = "display: none;"; // set price var news_price_of_items = 0; for(var j = news_from_to[i]; j < (news_from_to[i] + number_of_news[i]); j++) { news_price_of_items += news_price_data[j]; } // insert data c.innerHTML = "You Bought: 
"+ number_of_news[i]+ " items 
"+ "for $"+ news_price_of_items; // store popover header/content poH.appendChild(b); poC.appendChild(c); } inbox.setAtsortingbute("title", poH.innerHTML); inbox.setAtsortingbute("data-content", poC.innerHTML); console.log("Craft as Crafted:") console.log(poH.innerHTML); console.log(poC.innerHTML); } // run inbox_open() //inbox_open(news_from_to, number_of_news, news_price_data); // aloud BS 4 popover to run $(document).ready(function() { $('[data-toggle="popover"]').popover(); }); /* PRODUCT BUY NOW */ // data for Buy Now var now_cart_item = []; var now_cart_in_item = []; // product.buy_now function product_buy_now() { // inbox.update if(news_from_to.length == 0) { console.log("if branch:"); console.log(""); news_from_to = [0]; number_of_news = [1]; /* news_price_data = [product_price_data[now_cart_item[0]][now_cart_in_item[0]]]; */ news_price_data = [10]; inbox_open(news_from_to, number_of_news, news_price_data); } else { console.log("else branch:"); console.log(""); news_from_to.push(news_price_data.length); number_of_news.push(1); /* news_price_data.push(product_price_data[now_cart_item[0]][now_cart_in_item[0]]); */ news_price_data = [20]; inbox_open(news_from_to, number_of_news, news_price_data); } // mail purchase info //now_mail(); // empty data holders for next purchase now_cart_item = []; now_cart_in_item = []; } /* JQUERY */ // BS 4 popover header buttons.addEventListener $('#inbox').on('shown.bs.popover', function () { // get header/content classes var poHs = document.getElementsByClassName("poH"); var poCs = document.getElementsByClassName("poC"); for(var i = 0; i < poHs.length; i++) { popover_hardCodeHandler(i); } poHs[0].className += " seen active"; poCs[0].style = "display: block;"; } ); function popover_hardCodeHandler(i) { var poHs = document.getElementsByClassName("poH"); var poCs = document.getElementsByClassName("poC"); poHs[i].onclick = function() { // remove active class from all poHs and set display none for all poCs for(var j = 0; j < poHs.length; j++) { poHs[j].className = poHs[j].className.replace(" active", ""); } for(var j = 0; j < poCs.length; j++) { poCs[j].style = "display: none;"; } // add seen and active class to current element this.className += " seen active"; // set content for current element poCs[i].style = "display: block;"; } }  

• Comment supprimer le texte qui se chevauchent dans la table?
• Bootstrap Datatable ne fonctionne plus après le chargement de contenu via Ajax
• Bootstrap 4 carrousel jQuery ne fonctionne pas comme prévu
• Bootstrap v4: Marquage réactif de plusieurs types de caractères
• Comment changer la propriété de ul tag css en HTML

• Comment fermer tous les menus à l’intérieur d’un accordéon dans Angular 4
• Utilisation de datepicker de JQuery avec bootstrap
• Formulaires d’amorçage: Comment créer dynamicment des noms uniques pour les boutons radio
• comment utiliser des balises html dans la valeur json
• bootstrap-selectpicker ne change pas la largeur de la boîte