javascript - 如何为新加载的元素提供 JQuery UI 工具提示？

Question

我有一个几乎空的 HTML 文件，其中包含所有 JS 和 Css 文件。然后我在其中加载一个内容页面。其中一些包含我想添加工具提示的用户名

大多数看起来像这样:

<user title="" uid="12345" class="a">Username</user>

$( document ).on("load", "user", function(){
    $(this).tooltip({
        content : "loading...",
        open : function(){
            var elem = $(this)
            $.ajax("UserInfoToolTipContent.jsp?id="+$(this).attr("uid")).success(function(data){
                elem.tooltip("option", "content", data);
            });
        }
    });
});

这是这样做的方法吗？因为它不起作用并且我没有收到任何错误消息

Answer 1

    <link href="../css/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <script src="../js/jquery-1.10.2.js"></script>
    <script src="../js/jquery-ui-1.10.4.custom.min.js"></script>
    <script>
        $(document).ready(function () {
            addUserTagDynamic('<br /><br /><br /><br /><user title="jjj" data-message="Test 2" uid="12345" class="a">Username</user>');
            addUserTagDynamic('<br /><br /><br /><br /><user title="jj" data-message="Test 3" uid="12346" class="a">Username</user>');
        });

        function addUserTagDynamic(data1) {
            $('body').append(data1);
            //alert(.length);
            $('body').find('user:not(.addedtooltip)').tooltip({
                open: function () {
                    var elem = $(this)
                    elem.tooltip("option", "content", "<h5>Loading....</h5>");



                    setTimeout(function () {
                        elem.tooltip("option", "content", "<h6>Hi... I am AJAX Content [ " + elem.data('message') + " ].</h6>");
                    }, 500);

                    //Or

                    //$.ajax("UserInfoToolTipContent.jsp?id=" + $(this).attr("uid")).success(function (data) {
                    //    elem.tooltip("option", "content", data);
                    //});
                }
            }).addClass('addedtooltip');
        };
    </script>