如何在 Bootstrap 4 popover 事件中获取数据属性

Posted 2023-05-08

【中文标题】如何在 Bootstrap 4 popover 事件中获取数据属性

【英文标题】：How to get data attributes in Bootstrap 4 popover event

【发布时间】：2018-08-01 04:40:11

【问题描述】：

我有这种情况。

打开弹出按钮：

<a href="#" id="popover" data-plan-type="2" data-toggle="popover" data-html="true" data-placement="bottom">
<i class="fal fa-plus-circle"></i></a>

弹出框设置：

let orderPlanPopoverSettings = 

        html: true,
        selector: 'a#order-plan-popover',
        content: function () 

            return $('#popover_content_wrapper').html();

        

    ;

弹出框：

$('body').popover(orderPlanPopoverSettings).on('show.bs.popover', function(e) 

   //GET POPOVER BUTTON data-plan-type

);

我需要获取 show.bs.popover 按钮数据属性 data-plan-type

【参考方案1】：

事件目标 (e.target) 是触发弹出框的元素。然后使用 jQuery data() 作为“plan-type”值..

$('body').popover(orderPlanPopoverSettings).on('show.bs.popover', function(e) 

   //GET POPOVER BUTTON data-plan-type
   var planType = $(e.target).data("plan-type");
   console.log(planType);

);

演示：https://www.codeply.com/go/I7Zh7ohhJw