Question

我尝试使用title属性和jQuery创建工具提示，但无法找到显示动态添加元素的方法。

HTML

<a href="/some-page" title="Show tooltip" class="dfn">some page</a>

CSS

.tooltip {
    …
    display: none; /* I's needed for hard coded tooltips */
    …
}

的jQuery

$(function () {
    if (window.matchMedia('(min-width: 980px)').matches) {
        $('.dfn').hover(
            function () {
                var el = $(this);
                var txtTitle = el.prop('title');
                el.append('<p class="tooltip">' + txtTitle + '</p>');

                //That's it. My tooltip has been created, but it has not been shown
                $(el + ' .tooltip').show('fast');
                el.data('title', el.prop('title'));
                el.removeAttr('title');
            }, function () {
                $(el + ' .tooltip').hide('fast').remove();
                el.prop('title', el.data('title'));
            }
            );
    }
});

Answer 1

正如其他人所说，$(el + ' .tooltip').show('fast');可能是错误的。

el是一个对象，而不是一个连接的字符串'，一种方法是使用el.find('.tooltip').show() 另一种方法是使用上下文选项：$('.tooltip', el).show();

Answer 2

您需要有正确的代码才能找到新元素：

$('.tooltip', el).show('fast');

根据JavaScript决定将HTML元素转换为字符串的方式，您当前可能最终会搜索[object] .tooltip或类似字符串。

Answer 3

正如其他人提到的那样el.find('.tooltip').show()和el.find('.tooltip').hide().remove();解决问题。

此外，在HandlerOut函数中，您未声明。 Fiddle here

$(function () {
    //if (window.matchMedia('(min-width: 980px)').matches) {
        $('.dfn').hover(
            function () {
                var el = $(this);
                var txtTitle = el.prop('title');
                el.append('<p class="tooltip">' + txtTitle + '</p>');

                //That's it. My tooltip has been created, but it has not been shown
                el.find('.tooltip').show()
                el.data('title', el.prop('title'));
                el.removeAttr('title');
            }, function () {
                var el = $(this);
                el.find('.tooltip').hide().remove();
                el.prop('title', el.data('title'));
            }
            );
    //}
});

如何显示动态添加的元素

3 个答案: