Bootstrap 在动态内容上附加手动触发器的弹出窗口

Question

我有一组动态的 contenteditable divs。具有 class“.showPopover”的 Div 将具有弹出窗口。弹出框触发器设置为手动，因为我希望它们出现在焦点上，但并不总是隐藏在模糊处。

我在这里找到[问题]：Bootstrap Tooltip with manual trigger and selector option 我不能将 "selector method" 与手动触发器一起使用，所以我遵循了那里的一个答案，但是对于动态添加的 divs.

仍然没有出现弹出窗口

问题是，我只希望弹出窗口出现 div 具有特定 class 的时间，而不是与 div 一起添加。

div 对弹出框的 class 的更改通过启用按钮进行了一些简化。

jQuery(document).ready(function($) {

$('a.add').on('click', function(event) {
    event.preventDefault();
    $('.container').append('<p class="input" contenteditable="true"></p>');
});

$('a.enable').on('click', function(event) {
    event.preventDefault();
    $('.input').not('.showPopover').addClass('showPopover');
});

$('.container').on('focus', '.input.showPopover', function(event) {
    if (!$(this).data("bs.popover")) {                
        $(this).popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'<a href="#" class="btn btn-danger">Remove</a>'
        });
    }
    $(this).popover('show');
});

var mousedownHappened = false;

$('.container').on('blur', '.input', function(event) {
    if(mousedownHappened) {
        mousedownHappened = false;
    } else {
        $(this).popover('hide');
    }
});

$('.container').on('mousedown', '.popover .btn', function(event) {
    mousedownHappened = true;
});

});

Jsfiddle：http://jsfiddle.net/Lh2rpj0f/2/

Jquery1.11.1，Bootstrap3.3.2

感谢 Yenne Info，我找到了一个可行的解决方案： http://jsfiddle.net/Lh2rpj0f/4/

它可能不是最好的解决方案，但它完全符合我的要求。（当我点击弹出框内的按钮时，点击启用按钮后弹出框不会被破坏。）

至于现在，我的最终解决方案：

Answer 1

如here所述，您需要为每个元素动态生成工具提示。按照答案中给出的示例，在容器上绑定 mouseenter 和 mouseleave，并在必要时创建新的工具提示。

Answer 2

您可以重置和设置弹出窗口...

Fiddle : http://jsfiddle.net/Lh2rpj0f/3/

JS :

    jQuery(document).ready(function($) {

$('a.add').on('click', function(event) {
    event.preventDefault();
    $('.container').append('<div class="input" contenteditable="true"></div>');
});

$('a.enable').on('click', function(event) {
    event.preventDefault();
    $('.input').not('.showPopover').addClass('showPopover');
    unset();set();
});

    set();

    function unset(){
        $('.input').popover('destroy');

    }


    function set(){
        $('.container').on('focus', '.input.showPopover', function(event) {
            if (!$(this).data("bs.popover")) {                
                $(this).popover({
                    placement:'right',
                    trigger:'manual',
                    html:true,
                    content:'<a href="#" class="btn btn-danger">Remove</a>'
                });
            }
            $(this).popover('show');
        });
        $('.container').on('blur', '.input', function(event) {
            if(mousedownHappened) {
                mousedownHappened = false;
            } else {
                $(this).popover('hide');
            }
        });

        $('.container').on('mousedown', '.popover .btn', function(event) {
            mousedownHappened = true;
        });
    }



var mousedownHappened = false;


});

Answer 3

我更新了我原来的代码，现在它也能正常工作了。

$('.container').on('focus', '.input.showPopover', function(event) {
    if (!$(this).data("bs.popover") || !$(this).attr('data-popoverAttached')) {
        $(this).popover('destroy').popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'<a href="#" class="btn btn-danger">Remove</a>'
        });
        $(this).attr('data-popoverAttached', true);
    }
    $(this).popover('show');
});

JSfiddle：http://jsfiddle.net/Lh2rpj0f/5/

但是，我认为 bootstrap 弹出代码 中有问题。我认为我的原始代码不起作用的原因是 bootstrap 弹出窗口以某种方式神奇地附加（使用默认选项！）到我所有动态添加的 div（即使它们没有 class.showPopover)。因此，当焦点触发时，它不会通过 if 语句。 data-popoverAttached 属性解决了这个问题。

Bootstrap 在动态内容上附加手动触发器的弹出窗口

Bootstrap popover with manual trigger attached on dynamic content

javascript

jquery

twitter-bootstrap

bootstrap-popover