如何显示动态添加的元素

Question

I'm trying to create tooltips with title attribute and jQuery but can't find method to show dynamically added element.

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

As mentioned by others, $(el + ' .tooltip').show('fast'); is probably wrong.

The el is an object, not a string to concat', one way is to use el.find('.tooltip').show() .
The other way is to use the context option: $('.tooltip', el).show();

Answer 2

You need to have correct code to find new element:

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

Your current one probably endup searching for something like [object] .tooltip or similar string depending on how JavaScript decides to convert HTML element to string.

Answer 3

As others have mentioned el.find('.tooltip').show() and el.find('.tooltip').hide().remove(); solve the problem.

Also, in HandlerOut function, you el was not declared. 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'));
            }
            );
    //}
});