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>

我试图将bootstrap工具提示设置到所有的div中，就像这样循环。

$('.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();
});

这样做很好，因为你可以看到这个 小提琴演示

但是，当我使用 .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();
});

更新了 小提琴演示

我也检查了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 将新元素的所有属性放在替换方法中。

Answer 2

http:/jsfiddle.netpot43fj17）。

你的$element是在替换之前对旧元素的引用，所以你需要新的选择器，我想......

 $('.lblTest').attr('data-toggle', 'tooltip')
      .attr('data-placement', 'bottom')
     attr('title', 'Tooltip on bottom ' + (i + 1));

Answer 3

你引用了旧的元素，一次设置所有的数据属性，如下图所示

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

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

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

这里是一个工作 JSfiddle

Answer 4

注意：当你使用 $('[data-toggle="tooltip"]').tooltip(); 在 .each() 循环，你实际上是在初始化当前元素和之前的元素(再一次). 一个更好的方法是使用 this: $(this).tooltip();

另一种办法是使用 .attr( obj ) 但随着 attr: function 在标题上这样写。

$('.lblTest').attr({
    'data-toggle': 'tooltip',
    'data-placement': 'bottom',
    'title': function(i) { 
        return 'Tooltip on bottom ' + (i+1);
    } 
}).tooltip();

$('.lblTest').attr({
    'data-toggle': 'tooltip',
    'data-placement': 'bottom',
    'title': function(i) { 
        return 'Tooltip on bottom ' + (i+1);
    } 
}).tooltip();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="lblTest well">Label 1</div>
<div class="lblTest well">Label 2</div>
<div class="lblTest well">Label 3</div>

和一旦你替换了当前的div，变量 $element 是指向空的，因此没有添加数据属性。请看产生的html。<a class="lblTest well" href="#">Label 1</a>..... 你可以做 在replace中添加数据属性 或 预定义 a 替换前的元素 或者像这样替换divs。

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="lblTest well">Label 1</div>
<div class="lblTest well">Label 2</div>
<div class="lblTest well">Label 3</div>

Answer 5

replaceWith() 总是会返回旧的内容，所以你必须更新你的。$element 价值。

检查一下它的工作情况，如你所愿。http:/jsfiddle.netpot43fj14