成功调用 ajax 后更新引导弹出框的内容

Question

当我单击目标 div 时，我希望显示一个弹出框（我可能会显示一个加载标签作为内容），同时向服务器发送一个 ajax 获取请求以获取数据。数据返回后，我想更新这个已经打开的弹出框。

这是我的代码：

$(document).on('click', '.row-client', function (e) {

        var id = $(this).attr('id');

        var str = id.split('-');
        var component = str[0];
        var clientId= str[1];

        $.ajax({
            url: '../Clients/Index',
            type: 'GET',
            data: { clientId: clientId },
            dataType: 'html',
            success: function (data) {

                $('.popper').popover({
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    content: data
                });
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
});

我遇到的问题是：

1. 第一次单击或加载数据时不会自动显示弹出框。我需要继续点击。数据返回并加载后，弹出框将显示在“下一步”单击时。为什么会这样？

2. 有什么方法可以让弹出框保持打开状态并在我获得数据后自动更新内容？

3. 在下一次单击以提升弹出框时，我希望内容为空白（现在不是）。是什么阻止了它？

Answer 1

对 $().popover 的调用不会使弹出框出现。它仅将弹出行为添加到 DOM 元素。让它稍后出现的是点击，具体取决于您为弹出框配置的“触发器”。

在文档准备好后立即尝试调用 $('.popper').popover()。

如果要更改弹出框的内容，请尝试以下操作：

$('.popper').attr("data-content","new content");
$('.popper').data('bs.popover').show();