将数据属性插入Bootstrap 5弹出窗口

holgip5t 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(149)

我有一系列按钮，其中包含一个数据属性，我想插入到他们切换弹出窗口。

HTML格式：

<button type="button" class="btn btn-yellow btn-deleteTeacher" data-bs-toggle="popover" role="button" data-username="farkle86">
   <i class="fa-solid fa-circle-xmark"></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."
    });

当我将鼠标悬停在弹出窗口中的文本链接上时，该变量为“未定义”。我不知道如何正确获取用户名数据属性。

twitter-bootstrap

来源：https://stackoverflow.com/questions/73663352/insert-data-attribute-into-bootstrap-5-popovers

1条答案

按热度按时间

0wi1tuuw1#

这个问题是因为popover()声明中的this不是data属性所在的元素。要获得对该元素的引用，您需要在声明弹出窗口时手动遍历它们：

$('[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.`
  });
});

赞(0）回复(0）举报 2022-12-07

我来回答

将数据属性插入Bootstrap 5弹出窗口

1条答案

相关问题

热门标签

最新问答