4

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.

I found here [question]: Bootstrap Tooltip with manual trigger and selector option that 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.

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

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

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/

Jquery 1.11.1, Bootstrap 3.3.2

So thanks to Yenne Info, I've got a working solution: 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

4

3 回答 3

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

于 2015-01-29T17:49:13.320 回答
0

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

于 2015-01-29T14:18:39.010 回答
0

您可以重置和设置弹出框...

小提琴：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;


});
于 2015-01-29T14:23:19.413 回答