javascript - 如何显示动态添加的元素

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