Question

我有一个使用jQuery渲染的html，其中包括onclick函数：

$.each(response, function(index, item) {

    $('#appendTarget').append('<div class="col-md-3" style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px;">' + item.name +
        '</div>' +
        '<div class="col-md-3"><a class="btn" role="button" onclick="showPopover(this)"><b style="color: red">X</b></button>');

});

然后，我实现了showPopover函数：

function showPopover(element) {
  $(element).popover({
        html: true,
        trigger: 'focus',
        content: function() {
            return $('#popover-content').html();
        }
  });
}

像这样，它不起作用。但是，如果我删除此trigger: 'focus'，它会起作用。

有人知道为什么会这样吗？

Answer 1

focus trigger不起作用，因为焦点/标签未应用于您要触发的锚标记。

尝试将tabindex="-1"添加到触发Html的{{1}}标记中。

Answer 2

正如documentation所说 *单击鼠标右键时需要特定的标记为了实现正确的跨浏览器和跨平台行为，必须使用<< em> a >标签，而不是<< em> button >标签，并且还必须包括tabindex属性。 *

您需要将 tabindex 添加到按钮中，就像这样 << em> class =“ btn” tabindex =“ 0” role =“ button” onclick =“ showPopover（this）” >

Bootstrap Popover焦点不起作用

2 个答案: