javascript - qTip不在其他javascript代码动态添加的元素上显示(qTip not showing on dynamically added elements by other javascript code)

Question

This is my qTip settings:

(这是我的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>

And this is my html added via a function that is called from my custom js code:

(这是通过自定义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>

How to make qTip work on dynamically added elements too?

(如何使qTip在动态添加的元素上也起作用？)

UPDATE:

(更新：)

I have added more code and comments including the function that adds HTML elements that contains qTip tooltips dynamically.

(我添加了更多代码和注释，包括动态添加包含qTip工具提示的HTML元素的函数。)

  ask by turbostyklerx2 translate from so

Answer 1

You have to execute the $().qtip();

(您必须执行$（）。qtip（）;)

on every element you dynamically add after they've been added.

(在添加完每个元素后，对它们进行动态添加。)

At the moment, you add the qTips right after the page is ready, then add the new elements and then nothing.

(此刻，您可以在页面准备好后立即添加qTips，然后添加新元素，然后再添加任何内容。)

I haven't tested this, might need tweaking, but try this code, this tries to add the tooltip to the dynamically added username and email input fields:

(我尚未对此进行测试，可能需要进行调整，但是请尝试以下代码，这会尝试将工具提示添加到动态添加的用户名和电子邮件输入字段中：)

$(document).ready( function () {
  $('.hasTooltip').each(function() {
        qTipAdd(this);
  });

  show_registration_form(); // add html form with elements from my custom js function

});

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

    qTipAdd('#username');
    qTipAdd('#email');
}

function qTipAdd(element) {
    $(element).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
        }
    });
}