动态创建带有弹出窗口的按钮

Question

我尝试通过 JS 动态创建带有弹出窗口的按钮。到目前为止一切顺利，但我无法将 Div 内容附加到弹出窗口。如果我按下按钮，它们就会出现，但除了标题之外，它们都是空的。因此我猜问题出在 //Append newDiv to Popovercontent - 部分。但正是通过这个功能，我能够将 div 框静态地附加到我的弹出框。

HTML:

<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">
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
         </button>
      </td>
   </tr>
</table>

JS:

$("#btn1").popover({
   html: true,
   content: function() {
      return $("#div").html();
   }
});

var id = 2;

function addButton() {

//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() {
      return $("#newDiv" + id).html();
  }
});

id=id+1;
}

非常感谢！

Answer 1

您遇到这个问题是因为在 popover 内容回调中绑定了 id，然后您使用变量 id 来创建 jquery 选择器 $("#newDiv" + id).html()

但是id变量每次都会递增，当实际的popover事件调用它时，所有popover内容函数回调都会收到id值NoOfRowInTable+1。例如，如果您调用了 addButton() 2 次，弹出框内容回调中的 id 值将恢复为 4 以用于所有弹出框内容回调函数。

你可以在这里找到更好的解释

JavaScript closure inside loops – simple practical example

尽管对于您的示例，您不需要使用某些 ID 创建隐藏的 div 您可以为复选框创建 html 字符串，然后将其添加到弹出框内容回调中。

这是工作演示

编辑：使用 .bind() 正确绑定 id

$("#btn1").popover({
  html: true,
  content: function() {
    return $("#div").html();
  }
});

var id = 2;

$("#btn1").popover({
  html: true,
  content: function() {
    return $("#div").html();
  }
});

var id = 2;

function addButton() {

  //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();
  //add empty first empty column
  var tdhtml0 = document.createElement("td");
  trhtml.appendChild(tdhtml0);
  var tdhtml1 = document.createElement("td");
  tdhtml1.style = "text-align: center; vertical-align: middle;";
  tdhtml1.innerHTML = newHTML;
  trhtml.appendChild(tdhtml1);



  //Append newDiv to Popovercontent
  $("#btn" + id).popover({
    html: true,
    content: function(id) {
      return $("#newDiv" + id).html();
    }.bind(this, id)
  });

  id = id + 1;
}

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table id="table" class="table">
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>
      <div id="div" style="display:none">
        <input type="checkbox">Label 1
        <br>
        <input type="checkbox">Label 2
      </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">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
      </button>
    </td>
  </tr>
</table>

<button onclick="addButton()">Add Row</button>

动态创建带有弹出窗口的按钮

Dynamically creating buttons with popovers

javascript

jquery

twitter-bootstrap

bootstrap-popover