jQuery工具提示不適用于動態加載的HTML內容-有解無憂

網站由 3 個頁面組成，index.html、1.html、2.html。
目標是從包含工具提示和其他一些 html 的 1.html 加載 html，并將其顯示在 div 中，滑鼠懸停在加載的工具提示上后，我希望從 2.html 獲取工具提示文本。
但是，此代碼不起作用，沒有顯示錯誤，并且永遠不會執行 AJAX。

$(document).ready(function(){
    $( ".content span" ).tooltip({
        track:true,
        open: function( event, ui ) {
              var id = this.id; 
              var userid = $(this).attr('data-id');
              
              $.ajax({
                  url:'2.html',
                  type:'post',
                  data:{userid:userid},
                  success: function(response){
                      $("#" id).tooltip('option','content',response);
                  }
              });
        }
    }); 
});

.container{
    margin: 0 auto;
    width: 30%;
}

.content{
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 5px;
}
.content span{
    width: 250px;
}

.content span:hover{
    cursor: pointer;
}

<!doctype html>
<html>
    <head>
        <title>Dynamically show data in the Tooltip using AJAX</title>      
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>      
    </head>
    <body>
    <input type="button" id="btnLoad" value="Load"/>
        <div class='container' id="container"></div>
    </body>
<script>
$( "#btnLoad" ).click(function() {
$.ajax({
  url: "1.html",
  context: document.body
}).done(function( msg ) {
    $('#container').html(msg);
    $(this).tooltip();
  });
});
</script>
</html>

1.html 檔案的示例 HTML

            <div class='content'>
            <span title='Please wait..' data-id='1' id='user_1'>Pepsi</span>
        </div>

        <div class='content'>
            <span title='Please wait..' data-id='2' id='user_2'>7 Up</span>
        </div>

2.html 檔案的示例 HTML

This Tooltip text will be replaced with texts from Database

uj5u.com熱心網友回復：

更新

您更新的問題更加清晰，并幫助我追蹤正在發生的事情。我最初的答案解決了其中一個問題，但不是全部。實際上存在一系列問題。

問題 1

第一個問題是我之前描述的問題：jQuery 選擇器只匹配頁面加載時存在的頁面元素。 $(".content span").tooltip()只會為頁面加載時span存在的 s初始化工具提示。.content如果您span稍后注入 new s（或其中.content包含 s 的 new s span），則它們不包括在內，并且它們不會有工具提示。

最簡單的解決方法是使用（顯然沒有記錄？）selector工具提示選項。初始化頁面加載時存在的 HTML 元素上的工具提示，然后使用selector過濾選項以僅匹配您真正想要具有工具提示的元素。關鍵是過濾部分是實時發生的，因此將匹配新添加的元素。

在您的情況下，我們不能使用.content工具提示，因為在頁面加載時也不存在。在您的任何 AJAX 內容發生之前，我們需要一些存在于頁面上的父元素。假設您有一個喜歡的父級<div >，并且您的 HTML 將被注入其中（我想您也可以使用bodyor document）。因此，我們在該父 div 上初始化工具提示：

$(".parent").tooltip({
    // the selector option filters the elements that will actually have tooltips
    selector: '.content span'
});

問題 2

現在我們有了基本的工具提示功能，即使對于注入頁面的新內容也是如此。下一步是通過 AJAX 動態加載內容，并使用該內容更新工具提示的標題。通常你會這樣做：

$(selector).tooltip('option', 'content', 'New tooltip text!');

與我們當前正在查看工具提示selector的個人匹配的東西在哪里。span但在我們的例子中，這行不通——span 沒有附加工具提示！ 因為我們在上初始化工具提示.parent，所以顯示工具提示的個人spans 沒有附加工具提示，呼叫.tooltip()它們將失敗，并出現如下錯誤：

無法在初始化之前呼叫工具提示上的方法；試圖呼叫方法“選項”

要參考現有的工具提示，我們需要這樣做$('.parent').tooltip()，但如果我們這樣做：

// Don't do this
$('.parent').tooltip('option', 'content', 'New tooltip text!');

它會將頁面上的每個工具提示更改為相同的'New tooltip text!'，我們不希望這樣。

.open您用來觸發 AJAX的事件處理程式接收 jQueryevent作為引數。這event包括有關當前目標元素的資訊。使用它，我們可以找到我們當前真正正在查看的頁面上的哪個跨度：

open: function(event, ui) {
  // Find real targeted tooltip
  let target = $(event.originalEvent.target);

所以現在我們可以操作該元素的標題：

$target.attr('title', 'New tooltip!');

我們也可以讓它成為一個工具提示！

$target.tooltip();

實際上這還不夠，因為.parent工具提示已經打開并顯示“請稍候...”。上述步驟確實更新了標題，但是您必須將滑鼠移開然后再回傳才能看到它。我們希望內容能夠立即重繪、直播。我嘗試了一些實驗，發現效果很好：

// Temporarily disabling the parent tooltip hides the one that was already open
$('.parent').tooltip('disable');

// Update our target's title
$target.attr('title', 'New tooltip!');

// Initialise a tooltip on our target, and immediately open it
$target.tooltip().tooltip('open');

// Re-enable the parent tooltips, so this process will work again for other spans
$('.parent').tooltip('enable');

所以我們實際上是在頁面中添加新的工具提示實體，每次我們將滑鼠懸停在一個匹配的跨度上。這種方法有一個額外的優勢，即新的工具提示替換了舊的、特定的父工具提示span。這意味著父工具提示選項不再適用于span已經加載了工具提示內容的 s，這意味著如果您第二次將滑鼠懸停在它上面，它不會再次觸發 AJAX 請求span。我們從第一個 AJAX 呼叫中獲得的內容已經存在并且可以簡單地重復使用。

這是一個演示所有這些的作業片段。

我使用了https://www.npoint.io/這是一個 JSON 存盤箱來模擬您的 AJAX 呼叫。我與它沒有任何關系，它只是一個方便的工具。不幸的是，它似乎不太可靠，并且在我作業時對它的請求失敗了幾次。如果發生這種情況，請重試。

1.html我添加了一些資料與您的和檔案匹配的資料箱，2.html下面的代碼加載它們并使用它們的內容：

此 bin包含您的 HTML 內容；
此 bin包含用戶 ID 0 的虛擬資料；
此 bin包含用戶 ID 1 的虛擬資料；
此 bin包含用戶 ID 2 的虛擬資料；

$(document).ready(function () {

    // This URL returns a JSON response including HTML like your 1.html,
    // this way we can realistically simulate your 1.html AJAX call.
    let htmlContentUrl = 'https://api.npoint.io/6893d2fd7632835742cf';

    // These URLs return JSON responses including plain text like your
    // 2.html file, this way we can realistically simulate AJAX calls 
    // loading and using data from your DB
    let userContentUrls = [
        'https://api.npoint.io/06cf752b395286e41cb4',
        'https://api.npoint.io/2a3e0a338f92a803b3fc',
        'https://api.npoint.io/a9a4296244c36e8d5bfc'
    ];

    // We use this selector a few times, it is good practice to cache it
    var $parent = $('.parent');

    $("#btnLoad").click(function () {
        $.ajax({
            url: htmlContentUrl,
        }).done(function (msg) {
            $('#container').html(msg.content);
        });
    });

    $parent.tooltip({
        selector: '.conten span',
        track: true,
        open: function (event, ui) {
            // Find real targetted tooltip
            var $target = $(event.originalEvent.target);
            var userid = $target.attr('data-id');
            url = userContentUrls[userid];
            console.log('For userid', userid, 'url is', url);

            $.ajax({
                url: url,
                type: 'get',
                data: {
                    userid: userid
                },
                success: function (response) {
                    // We can't simply update the tooltip for $target, because
                    // it *has* no tooltip!  The tooltip is actually attached
                    // to .parent.  To refresh the already visible tooltip, we
                    // need to take a few steps.
                    $parent.tooltip('disable');
                    $target.attr('title', response.content);
                    $target.tooltip().tooltip('open');
                    $parent.tooltip('enable');
                }
            });
        }
    });
});

.container {
  margin: 0 auto;
  width: 30%;
}

.content {
  border: 1px solid black;
  padding: 5px;
  margin-bottom: 5px;
}

.content span {
  width: 250px;
}

.content span:hover {
  cursor: pointer;
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="parent">

  <div class="container">
    <div class="content">
      <span id="user_0" title="Please wait ..." data-id="0">Water</span>
    </div>
  </div>

  <input type="button" id="btnLoad" value="Load" />

  <div class='container' id="container"></div>

</div>

旁注：

我添加了一個在頁面加載時可見的工具提示（用戶 ID 0），只是為了證明在頁面加載和注入新內容后一切正常；
約定是在檢索資料時使用 GET，而在更改資料時使用 POST。您的 AJAX 呼叫只是檢索要顯示的資料，所以真的應該是 GET；
我不確定你為什么有context: document.body，但我認為沒有必要，為了簡單起見，我洗掉了它；
如果您要多次使用 jQuery 選擇器，快取它們是有意義的。我這樣做是為了$parent, 和$target。

uj5u.com熱心網友回復：

您可以嘗試將此行推送到您的代碼中嗎？

$('body').tooltip({selector: '.content span'});

緊接著

$(document).ready(function() {
    // push the above line here
    ... your current code

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/471117.html

標籤：jQuery jQuery-ui

上一篇：IOS模擬器打不開

下一篇：VSCodeMacm1Debug沒有使用MakefileconfC語言達到我的斷點