Question

我已将Bootstrap 4 popovers动态添加到表中。

我这样初始化我的弹出窗口：

// Initialize popover
$('body').popover({
    html: true,
    template:
        '<div class="popover popover-row-field" role="tooltip">' +
        '<div class="arrow"></div>' +
        '<button type="button" class="btn-popover-header btn-edit-popover-close float-right text-primary" aria-label="Close">' +
        '<i class="fal fa-check"></i>' +
        '</button>' +
        '<button type="button" data-action="undo" class="btn-popover-header action-button text-primary float-right">' +
        '<i class="fal fa-undo"></i>' +
        '</button>' +
        '<h3 class="popover-header"></h3>' +
        '<div class="popover-body"></div>' +
        '</div>',
    placement: 'bottom',
    trigger:'click',
    position: 'relative',
    selector: '.btn-edit-cell',
});

我在弹出窗口上有一个用于关闭按钮的事件监听器：

// Close popover by clicking the X
$(document).on('click', '.btn-edit-popover-close', function() {
    $('.btn-edit-cell').popover('hide').popover();
});

然后克隆一个模板行并将其添加到表中：

<td class="field-editor-input align-top">
    <button type="button" class="btn-popover-header text-light btn-edit-cell save-btn-group" data-link="{{ $col->header }}-new"
            data-html="true" title="{{ pretty_heading($col->header) }}" data-row-id="#row-template-new"
            data-content="<textarea id='text-{{ $col->header }}-new' name='{{ $col->header }}' class='form-control popover-edit-field'></textarea>">
        <i class="fal fa-pen text-light"> </i>
    </button>
    <div id="div-{{ $col->header }}-new" data-orig=""></div>
</td>

弹出窗口将打开，但关闭按钮不会触发。

此外，如果滚动页面，则弹出框不会保持固定在其目标位置。

谢谢

动态添加的Bootstrap 4 Popover无法关闭

0 个答案: