ポップオーバーでボタンを動的に作成する

Question

JSを介して動的にポップオーバーを使用してボタンを作成しようとしています。これまでのところとても良いですが、私はDivコンテンツをポップオーバーに添付することはできません。ボタンを押すと表示されますが、見出しの部分を除いては空です。したがって、問題は//Append newDiv to Popovercontent - Partにあると思います。しかし、この関数を使用すると、divboxボックスを静的にポップオーバーに追加することができます。

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を結合され、その後、あなたはjQueryのセレクタ$("#newDiv" + id).html()

を作成するために、変数IDを使用している。しかしid変数は、実際のポップオーバーイベントは、それが受け取ると呼ばれるたびに、インクリメントされるため、この問題に直面していますid値NoOfRowInTable + 1すべてのポップオーバーコンテンツ関数calllback。 たとえば、addButton（）を2回呼び出した場合、popoverコンテンツコールバック内のidの値は、すべてのpopoverコンテンツコールバック関数に対して4として再生されます。

ご例えばあなたがチェックボックスのためのHTML文字列を作成し、その後にそれを追加することができます いくつかのidを持つ隠されたdiv要素を作成する必要はありませんがあなたがここに良く説明

JavaScript closure inside loops – simple practical example

を見つけることができますポップオーバーコンテンツコールバック。適切

$("#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>

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.