I'm unable to add button to a popover

Question

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!

Answer 1

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();
        }
    });