自定義屬性值通過jquery獲得更改，但更改未顯示在呈現的html中

Question

我正在使用Balloon.css作為工具提示。

元素上的工具提示文本來自自定義屬性“數據氣球”。

我想動態加載工具提示文本。

我可以通過jquery更改它，但是新文本不會在顯示的html上呈現。

這是我的代碼：

HTML代碼提及如下：

<div id="instruction_div_main" data-balloon="Original text"></div>

jQuery代碼提及如下：

alert($("#instruction_div_main").attr("data-balloon"));
// alert shows "Original text"

$("#instruction_div_main").attr("data-balloon","New Text");

alert($("#instruction_div_main").attr("data-balloon"));
// alert shows "New text"

但是現在當我將鼠標懸停在該div上時，它不會顯示新文本，而仍會顯示“原始文本”

為什么會這樣，請糾正我錯的地方。

僅供參考：標題屬性也面臨類似問題。

**更新**

我在jquery ui對話框中顯示的某些圖標上顯示該工具提示。 該對話框上有一個后退按鈕，可隱藏圖標並顯示一些單選按鈕。 當選擇任何單選按鈕時，圖標再次出現，單選按鈕消失。 這次的圖標提示應該是新的。 我正在使用上面的代碼，但是顯示了原始文本，在這里我可以看到屬性值已更改，但未在圖標工具提示上呈現。

Answer 1

請查看附加的代碼段。

 alert($("#instruction_div_main").attr("data-balloon")); // alert shows "Original text" $("#instruction_div_main").attr("data-balloon","New Text"); $("#instruction_div_main").html("New Text"); $("#instruction_div_main").attr("title","New Text"); alert($("#instruction_div_main").attr("data-balloon")); // alert shows "New text" 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="instruction_div_main" title="Original text" data-balloon="Original text">Original text</div>