Insert Data Attribute into Bootstrap 5 Popovers-CodePudding

I have a series of buttons that contain a data-attribute that I want to insert into the popover they toggle.

HTML:

<button type="button"  data-bs-toggle="popover" role="button" data-username="farkle86">
   <i ></i>
</button>

JS:

$('[data-bs-toggle="popover"]').popover({
        html: true,
        container: 'body',
        placement: 'top',
        content: "<a href='teachers.asp?action=delete&user=" $(this).data('username') "'>Click Here</a> to permanently delete this teacher."
    });

When I hover over the text link in the popover, the variable is 'undefined'. I don't know how to properly acquire the username data attribute.

CodePudding user response：

The issue is because this within the popover() declaration isn't the element the data attribute exists on. To get a reference to the element you would need to loop through them manually when declaring the popovers:

$('[data-bs-toggle="popover"]').each((i, el) => {
  let $el = $(el);
  $el.popover({
    html: true,
    container: 'body',
    placement: 'top',
    content: `<a href="teachers.asp?action=delete&user=${$el.data('username')}">Click Here</a> to permanently delete this teacher.`
  });
});