使用popovers

Question

我尝试通过JS动态创建带有弹出窗口的按钮。到目前为止这么好但我不能让Div内容附加到popovers上。如果我按下按钮，它们会显示出来但除了标题之外它们只是空的。因此我想问题出在//Append newDiv to Popovercontent - Part。但正是通过这个功能，我可以静态地将div框添加到我的popovers中。

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

您遇到此问题，因为在弹出式内容回调中绑定id，然后您使用变量id创建jquery选择器$("#newDiv" + id).html()

但是id变量每次都会递增，当实际的popover事件调用它时，所有popover内容函数calllback都会收到id值NoOfRowInTable + 1。 例如，如果你已经调用了addButton（）2次，那么popover内容回调中id的值将被恢复为4，用于所有popover内容回调函数。

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

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>