Ankündigung

Einklappen
Keine Ankündigung bisher.

Dynamisches Erstellen von Buttons mit Popovern

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Dynamisches Erstellen von Buttons mit Popovern

    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
    Code:
    //Append newDiv to Popovercontent
    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:

    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>
    JS:

    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;
    }
    Vielen Dank!
Lädt...
X