javascript – 动态内容附带手动触发器的Bootstrap popover

2019年8月5日 166次阅读

我有一套充满活力的div.具有类“.showPopover”的Div将具有弹出窗口.弹出窗口触发器设置为手动,因为我希望它们出现在焦点上,但并不总是隐藏在模糊上.

我在这里找到[问题]：Bootstrap Tooltip with manual trigger and selector option
我不能将“选择器方法”与手动触发器一起使用,所以我按照其中一个答案,但是动态添加的div仍然没有弹出窗口.

问题是,我只希望popover出现在具有特定类的div中,而div不会与div一起添加.

使用启用按钮可以简化弹出窗口的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/

Jquery 1.11.1,Bootstrap 3.3.2

感谢Yenne Info,我有一个有效的解决方案：
http://jsfiddle.net/Lh2rpj0f/4/

它可能不是最好的解决方案,但它完全符合我的要求. (当我单击弹出窗口内的按钮时,单击“启用”按钮时不会破坏此弹出窗口.)

至于现在,我的最终解决方案：Bootstrap popover with manual trigger attached on dynamic content

最佳答案 我更新了原始代码,现在它也可以按预期工作.

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

点赞