How to get dynamic popover element after inserted to DOM?

Question

I am having a simple popover with a dynamic canvas(snippet below):

$('[data-toggle="popover"]').popover({
  html: true,
  content: '<canvas id="myChart" width="400" height="400"></canvas>',
}).on('shown.bs.popover', function() {

  const ctx = document.getElementById("myChart")
  alert(ctx.id)

I don't seem to be able to get the myChart element, getElementById returns a null object. I am assuming this has to do with the fact that the canvas element is not inserted into the DOM yet, but since I have little knowledge about Javascript, I am not sure how to fix that issue in order to be able to get the canvas object and display a chart on it.

Any suggestions?

Answer 1

I discovered what was needed to make it work, so unexpected. I needed to turn off auto sanitize with:

        $('[data-toggle="popover"]').popover({
          html: true,
          content: '<canvas id="myChart" width="400" height="400"></canvas>',
          sanitize: false
        }).on('shown.bs.popover', function() {