I've been trying to add a button to a popover. I've got a grid of divs, generated via asp.net. My code looks something like this:
$(document).ready(function () {
$('.hometable').popover({
html: true,
trigger: "manual",
title: function () {
return $('#popover-title').html();
},
content: function () {
return $('popover-content').html();
}
});
$('.hometable').mousedown(){
$(this).popover("show");
}
}<div id="popover-title" class="hide popover_name" hidden>
<b>Overzicht</b>
</div>
<div id="popover-content" class="hide popover_name" hidden>
<div>
<button>Test</button>
</div>
</div>
<table>
@for(int i = 0; i < 5; i++){
<tr>
@for(int j = 0; j < 5; j++){
<td class="hometable">
<div></div>
<td>
}
</tr>
}
</table>If I replace the button for example by Test it'll work fine, but I cant get the button to be included in anyway. Any suggestions? Thanks in advance!
It appeared that my button was automatically removed as soon as it was loaded due to the default "sanitize" functionality included into popover. I was able to resolve the issue by adding "sanitize: false" option to my popover initialization. My code now looks like this:
$('.hometable').popover({
html: true,
trigger: "manual",
sanitize: false,
title: function () {
return $('#popover-title').html();
},
content: function () {
return $('popover-content').html();
}
});