如何在动态添加的代码上启用工具提示?

时间:2011-08-17 20:34:12

标签: javascript jquery tooltip

我有一个使用分页的网站。

我使用以下插件获取工具提示: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();
            }
        });
    });

这是启用/禁用工具提示的功能:

<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>

当我加载新页面时,当我将鼠标悬停在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

            }
         }
   });
});

2 个答案:

答案 0 :(得分:0)

查看页面源显示最初请求页面时传递给客户端的内容。它不显示当前的DOM。

将新内容添加到页面时,它不知道已运行的内容。添加内容后,您需要重新扫描页面以获取工具提示。

答案 1 :(得分:0)

EnableDisableToolTip中,有条件启用/禁用工具提示($("#helptext_checkbox").is(':checked:'))。你打算在进行ajax通话时检查它吗?我认为没有检查工具提示是否未启用。