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

Bootstrap popover with manual trigger attached on dynamic content

提问by ovalek

I have a dynamic set of contenteditable divs. Divs that have class ".showPopover", will have a popover. The popover trigger is set to manual, because I want them to appear on focus, but not always hide on blur.

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

I found here [question]: Bootstrap Tooltip with manual trigger and selector optionthat I can't use the "selector method" together with the manual trigger, so I followed one of the answers there, but the popover still doesn't appear for dynamically added divs.

我在这里找到 [问题]：带有手动触发器和选择器选项的 Bootstrap 工具提示，我不能将“选择器方法”与手动触发器一起使用，所以我遵循了那里的答案之一，但弹出框仍然没有出现动态添加的 div。

The problem is, that I only want popover to appear for divs with specific class, which is not added together with the div.

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

The change of div's class for the popover is a bit simplified with an enable button.

使用启用按钮稍微简化了弹出窗口的 div 类的更改。

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/

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

Jquery 1.11.1, Bootstrap 3.3.2

Jquery 1.11.1，引导程序 3.3.2

---

---

So thanks to Yenne Info, I've got a working solution: http://jsfiddle.net/Lh2rpj0f/4/

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

It might not be the best solution, but it does exactly what I wanted. (When I click the button inside popover, this popover is not destroyed when Enable button is clicked.)

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

---

---

As for now, my final solution: Bootstrap popover with manual trigger attached on dynamic content

至于现在，我的最终解决方案：Bootstrap popover with manual trigger附加在动态内容上

采纳答案by ovalek

I updated my original code, and now it also works as I expected.

我更新了我的原始代码，现在它也按我的预期工作了。

$('.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/

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

But still, I think there is something wrong inside the bootstrap popover code. I think the reason why my original code doesn't work, is that the bootstrap popover is somehow magically attaching (with default options!) to all my dynamically added divs (even though they doesn't have class .showPopover). Because of that, when focus fires, it doesn't pass through the if statement. The data-popoverAttached attribute solves this problem.

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

回答by Leopoldo Negro

As stated hereyou need to dynamically generate tooltips for each element. Follow the example given on the answer, binding mouseenterand mouseleaveon the container and creating new tooltips if necesassary.

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

回答by BENARD Patrick

You can reset and set the popover...

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

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

小提琴：http: //jsfiddle.net/Lh2rpj0f/3/

JS :

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;


});