[英]How do enable tooltip on dynaically added code?
我有一個網站,它使用分頁。
我使用以下插件作為工具提示: http://plugins.jquery.com/project/tooltip
我使用 AJAX 來更新 div 容器。 這是代碼:
$(".page-number").live("click", function ()
{
var page = parseInt($(this).html());
var progressbarValue = ((page / $("#NumberOfPages").val()) * 100);
var catId = $("#CategoryID").val();
$.ajax({
url: '@Url.Action("QuestionList")',
data: { "categoryId": catId, "page": page },
success: function (data) {
$("#question-list").html(data);
$("#progressbar").progressbar("value", progressbarValue);
$("#progresstext").html("<p>" + Math.round(progressbarValue) + "% gennemgået</p>");
EnableDisableToolTip();
}
});
});
這是 function 啟用/禁用工具提示:
<script type="text/javascript">
function EnableDisableToolTip() {
var help_text = $("#helptext_checkbox").is(':checked:');
if (help_text) {
alert("true");
$(".tooltip").qtip("enable")
}
else if (!help_text) {
alert("false");
$(".tooltip").qtip("disable");
}
}
</script>
當我加載新頁面時,當我 hover 將鼠標懸停在 class="tooltip" 的元素上時,我看不到任何工具提示。 另外,當我查看源代碼時,動態添加的代碼不存在。 它適用於第一頁,並且帶有 class="tooltip" 的源代碼在那里。 但不是動態的東西。
我該如何解決這個問題?
[編輯]
工具提示代碼:
$(".tooltip").each(function()
{
$(this).qtip({
show: 'mouseover',
hide: 'mouseout',
style: {
name: 'light', // Inherit from preset style
width: {
min: 0,
max: 250
},
},
position: {
corner: {
target: 'topMiddle',
tooltip: 'bottomLeft'
},
adjust: {
screen: true,
scroll: false
}
}
});
});
查看頁面源會顯示最初請求頁面時交付給客戶端的內容。 它不顯示當前的 DOM。
當您將新內容添加到頁面時,它不知道已經運行了什么。 添加內容時,您需要重新掃描頁面以獲取工具提示。
在EnableDisableToolTip
中有一個啟用/禁用工具提示的條件( $("#helptext_checkbox").is(':checked:')
)。 您確定在撥打 ajax 電話時會檢查它嗎? 我認為它沒有被檢查,因為沒有啟用工具提示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.