javascript - Bootstrap 工具提示不适用于 .replaceWith()

Question

我有多个<div>我的 HTML 标记中的标签如下所示:

<div class="lblTest well">Label 1</div>
<div class="lblTest well">Label 2</div>
<div class="lblTest well">Label 3</div>

我正在尝试通过如下循环为所有 div 设置 Bootstrap 工具提示:

$('.lblTest').each(function (i, n) {
    var $element = $(this);        

    //-- Add the data attributes required for tooltip
    $element.attr('data-toggle', 'tooltip')
        .attr('data-placement', 'bottom')
        .attr('title', 'Tooltip on bottom ' + (i + 1));

    //-- initialize all the tooltips
    $('[data-toggle="tooltip"]').tooltip();
});

这工作正常，正如您在 fiddle demo 中看到的那样

但是，当我使用.replaceWith()时替换所有 <div>标签为 <a>工具提示似乎不起作用。我的代码:-

$('.lblTest').each(function (i, n) {
    var $element = $(this);        

    $element.replaceWith(function () {
        return $('<a/>', {
            html: this.innerHTML,
            class: this.className,
            href: '#'
        });
    });

    //-- Add the data attributes required for tooltip
    $element.attr('data-toggle', 'tooltip')
        .attr('data-placement', 'bottom')
        .attr('title', 'Tooltip on bottom ' + (i + 1));

    //-- initialize all the tooltips
    $('[data-toggle="tooltip"]').tooltip();
});

已更新fiddle demo

我还检查了Chrome开发者工具，似乎在这种情况下没有添加数据属性。我们如何解决这个问题？有任何想法吗？

Answer 1

应该这样做:

$element.replaceWith(function () {
    return $('<a/>', {
        html: this.innerHTML,
        class: this.className,
        href: '#',
        'data-toggle':'tooltip',
        'data-placement':'bottom',
        'title':'Tooltip on bottom ' + (i + 1)
    });
});

Fiddle

<小时/>

不要为 var $element 设置新属性，而是将所有属性放在替换方法中的新元素中。