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也能动态添加元素？

更新

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

Answer 1

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

目前，您在页面准备就绪后立即添加qTips，然后添加新元素，然后不添加任何内容。

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

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

Answer 2

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

$(document).on('click', '.dynamic-element-class', function(){
   // return if qtip already initialized
   if( 'object' === typeof $(elem).data('qtip') ) return
   $(element).qtip({
      content: {
        text: $(this).next('div').html()
      },
      position: {
        my: 'bottom center', 
        at: 'top center',
        target: $(this)
      },
      show: {
        ready: true, // Show qtip on initialization 
        event: 'click mouseenter',
        solo: true,
        effect: function(offset) {
            $(this).fadeIn(100);
        }
      },
      hide: {
        fixed: true,
        delay: 300
      }
  });
})

q没有显示其他javascript代码动态添加的元素

2 个答案: