ajax HTML内容未在bootstrap pop中呈现

ajax HTML content not rendering in bootstrap pop

本文关键字：pop bootstrap HTML ajax      更新时间：2023-09-26

我正试图从ajax请求中获取HTML内容，以加载到twitter引导程序（v3）popover中。

popover元素看起来是这样的。

<a class="more-info" data-remotecontent="/tasks/moreinfo/56eb0256-1a78-483c-b053-a387011f5b97" data-original-title="task 1" data-title="task 1" data-toggle="popover" rel="popover" href="/tasks/56eb0256-1a78-483c-b053-a387011f5b97">task 1</a>

javascript看起来是这样的。

$('a.more-info').each(function () {
            var info = $(this);
            info.bind('mouseenter', function () {
                info.popover({
                    html: true,
                    title: info.html(),
                    content: 'Loading',
                }).popover('show');
                $.get(info.attr('data-remotecontent'), function (data) {
                }).done(function (data) {
                    info.attr('data-html', 'true');
                    //info.popover({ content: data, placement: 'right' }).popover('show');
                    info.attr('data-placement', 'right');
                    info.attr('data-content', data);
                    info.popover('show');
                });

            });
            info.bind('mouseleave', function () {
                info.popover('hide');
            });
        });

ajax get请求返回HTML，但它从未被呈现到popover中。我有一种感觉，我可能无法正确地逃离响应字符串。

要将ajax响应呈现到popover的内容中，我缺少什么？

如果没有向已经初始化的popover注入新内容的引导方法，则必须操作生成的标记，如下所示这不是一个理想的解决方案。我建议在收到ajax内容后调用destroy方法一次，更新元素，初始化并以编程方式打开popover

A。操作popover标记——不好

以下是popover标记的样子：

<div class="popover fade right" role="tooltip" ....>
    <div class="arrow" style="top: 12.987012987013%;"></div>
    <h3 class="popover-title">task 1</h3>
    <div class="popover-content">Loading</div>
</div>

注意：这不是一个好的解决方案的主要原因是不能保证这将是未来版本中的标记

概念验证

B。调用destroy方法，初始化并打开--GOOD

概念验证

此外，如果希望每个mouseenter事件产生相同的Loading ..效果，则mouseleave处理程序必须再次销毁popover并对其进行初始化。

    info.bind('mouseleave', function () {
        info.popover('destroy')
        .popover({
            html: true,
            title: info.html(),
            content: 'Loading',
        });
    });
相关文章：