qTip不会在其他javascript代码动态添加的元素上显示

Question

这是我的qTip设置：

<script>

    $(document).ready( function () {

        $('.hasTooltip').each(function() {
            $(this).qtip({
                content: {
                    text: $(this).next('div').html()
                },
                position: {
                    my: 'bottom center', 
                    at: 'top center',
                    target: $(this)
                },
                show: {
                    event: 'click mouseenter',
                    solo: true,
                    effect: function(offset) {
                        $(this).fadeIn(100);
                    }
                },
                hide: {
                    fixed: true,
                    delay: 300
                }
            });
        });

        show_registration_form(); // add HTML form with qTip tootlip elements

        function show_registration_form() {

            $(".content-area").append('<form action="" method="POST"></form>');

            var form2Html = [

                '<input type="text" value="" name="username" id="username">',
                '<input type="email" value="" name="email" id="email">',

                // ... standard form content

            ].join('');

            $(".content-area form").append(form2Html);

        }

    });

</script>

这是通过自定义js代码调用的函数添加的html：

<div class="hasTooltip">Hover me to see a tooltip</div>
<div class="hidden">This is just a test! <a href="http://google.com">Link test</a></div>

如何使qTip也能在动态添加的元素上工作？

UPDATE：

我已经添加了更多代码和注释，包括动态添加包含qTip工具提示的HTML元素的功能。

Answer 1

您必须执行$（）。qtip（）;在您添加完元素后动态添加的每个元素上。

Answer 2

您可以按文档绑定事件，并在首次触发事件时初始化qtip：