簡體   English   中英

如何在動態添加的代碼上啟用工具提示?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM