Question

我正在尝试从ajax请求中获取HTML内容，以便在twitter bootstrap（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的内容中吗？

Answer 1

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

：一种。操纵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>

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

Concept Verification

<强> B中。调用destroy方法，初始化和打开 - GOOD

Concept Verification

此外，如果您希望每个mouseleave事件产生相同的mouseenter效果，则您的Loading ..处理程序必须再次销毁该弹出框并初始化它。

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

ajax HTML内容无法在bootstrap pop中呈现

1 个答案: