Bootstrap 工具提示不適用於 .replaceWith()

Question

我的 HTML 標記中有多個<div>標簽，如下所示：

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

我正在嘗試通過如下循環將引導程序工具提示設置為所有 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)
    });
});

小提琴

---

不是為 var $element設置新屬性，而是將所有屬性放在 replace 方法中的新元素中。

Answer 2

http://jsfiddle.net/pot43fj1/7/

你的 $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()循環中，您實際上是在初始化當前元素以及之前的元素（ AGAIN ）。 更好的方法是使用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>

AND ，一旦替換當前 div，變量$element將指向 null，因此不會添加數據屬性。 查看生成的 html： <a class="lblTest well" href="#">Label 1</a>.... 。 您可以在替換之前添加 data 屬性，或者在替換之前預定義a元素，或者像這樣替換 div：

$('.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.net/pot43fj1/4/