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

Question

I have an almost empty HTML file with all the JS and Css files included. Then i load a content page in it. Some of them contain Usernames where i want to add a tooltip

Most of them look like this :

<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);
            });
        }
    });
});

Is this the way to do it? Because it is not working and i dont receive any error messages

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>