Hallo zusammen,
I versuche Buttons mit Popover dynamsich via Javascript zu erstellen. Allerdings bekomme ich es nicht hin, diesen neu erstellten Popovern div-contents zuzuweisen. Die Popover erscheinen zwar, zeigen aber außer der Überschrift nichts an. Ich glaube, dass das Problem in dem Abschnitt
liegt. Aber mit genau dieser Funktion weise ich den statisch generierten Popovern div Inhalte zu....
Edit: Durch hinzufügen von .bind() im JS-Code konnte ich das Problem lösen.
HTML:
JS:
Vielen Dank!
I versuche Buttons mit Popover dynamsich via Javascript zu erstellen. Allerdings bekomme ich es nicht hin, diesen neu erstellten Popovern div-contents zuzuweisen. Die Popover erscheinen zwar, zeigen aber außer der Überschrift nichts an. Ich glaube, dass das Problem in dem Abschnitt
Code:
//Append newDiv to Popovercontent
Edit: Durch hinzufügen von .bind() im JS-Code konnte ich das Problem lösen.
HTML:
HTML-Code:
<table id="table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> <tr> <td></td> <td> <div id="div" style="display:none"> <input type="checkbox"> Label 1</input> <br> <input type="checkbox"> Label 2</input> </div> </td> <td style="text-align: center; vertical-align: middle;"> <button data-toggle="popover" id="btn1" data-original-title="Popover" data-html="true" data-placement="bottom" type="button" class="btn btn-default" aria-label="Left Align"> popover <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> </button> </td> </tr> </table> <button onclick="addRow()" class="btn btn-primary" id="buttonadd"><span class="glyphicon glyphicon-plus-sign"></span> Add Row </button>
Code:
$("#btn1").popover({ html: true, content: function() { return $("#div").html(); } }); var id = 2; function addRow() { //Creating HTML-Code for popovers var newHTML = "<div style='display:none' id = 'newDiv" + id + "'>"; for (i = 0; i < 2; i++) { newHTML += "<input type=\"checkbox\" name=\"name" + id + i + "\">Label" + i + "</input><br>"; } newHTML += "</div><button data-toggle=\"popover\" id=\"btn" + id + "\" data-original-title=\"Popover\" data-html=\"true\" data-placement=\"bottom\" type=\"button\" class=\"btn btn-default\" aria-label=\"Left Align\">"; newHTML += "<span class=\"glyphicon glyphicon-chevron-down\" aria-hidden=\"true\"></span></button>"; //Creating new Element var trhtml = document.getElementById("table").insertRow(); var tdhtml = document.createElement("td"); tdhtml.style = "text-align: center; vertical-align: middle;"; tdhtml.innerHTML = newHTML; trhtml.appendChild(tdhtml); //Initialize new Popover $('[data-toggle="popover"]').popover(); //Append newDiv to Popovercontent $("#btn" + id).popover({ html: true, content: function(id) { return $("#newDiv" + id).html(); }.bind(this,id) }); id = id + 1; }