Javascript 如何显示动态添加的元素

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

HTML

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

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

$（函数（）{
if（window.matchMedia（‘（最小宽度：980px）’）.matches）{
$（'.dfn'）。悬停(
函数（）{
var el=$（本）；
var txtTitle=el.prop（“标题”）；
el.append（“
”+txtitle+”
”）；
//就是这样。我的工具提示已创建，但尚未显示
$（el+'.tooltip'）.show（'fast'）；
el.数据（‘标题’、el.道具（‘标题’）；
el.removeAttr（“标题”）；
}，函数（）{
$（el+'.tooltip'）.hide（'fast'）.remove（）；
el.prop（标题），el.data（标题）；
}
);
}
});

如其他人所述，

$（el+'.tooltip'）.show（'fast'）可能是错误的

el是一个对象，而不是concat'的字符串，一种方法是使用
el.find（'.tooltip'）.show（）


另一种方法是使用上下文选项：
$（'.tooltip'，el.show（）
正如其他人所提到的，
$（el+'.tooltip'）.show（'fast'）可能是错误的

el是一个对象，而不是concat'的字符串，一种方法是使用
el.find（'.tooltip'）.show（）


另一种方法是使用上下文选项：
$（'.tooltip'，el.show（）
您需要有正确的代码才能找到新元素：

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

您当前的一个可能会搜索类似于
[object]。工具提示或类似字符串，具体取决于JavaScript决定如何将HTML元素转换为字符串。
您需要正确的代码才能找到新元素：

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

您当前的工具可能会搜索类似于
[object].tooltip
或类似的字符串，这取决于JavaScript决定如何将HTML元素转换为字符串。
正如其他人提到的
el.find（'.tooltip'）.show（）
和
el.find（'.tooltip'）.hide（）.remove（）解决问题

另外，在HandlerOut函数中，未声明您的el

$（函数（）{
//if（window.matchMedia（‘（最小宽度：980px）’）.matches）{
$（'.dfn'）。悬停(
函数（）{
var el=$（本）；
var txtTitle=el.prop（“标题”）；
el.append（“
”+txtitle+”
”）；
//就这样。我的工具提示已经创建了，但还没有显示
el.find（'.tooltip'）.show（）
el.数据（‘标题’、el.道具（‘标题’）；
el.removeAttr（“标题”）；
}，函数（）{
var el=$（本）；
el.find（'.tooltip'）.hide（）.remove（）；
el.prop（标题），el.data（标题）；
}
);
//}
});
正如其他人提到的
el.find（'.tooltip'）.show（）
和
el.find（'.tooltip'）.hide（）.remove（）解决问题

另外，在HandlerOut函数中，未声明您的el

$（函数（）{
//if（window.matchMedia（‘（最小宽度：980px）’）.matches）{
$（'.dfn'）。悬停(
函数（）{
var el=$（本）；
var txtTitle=el.prop（“标题”）；
el.append（“
”+txtitle+”
”）；
//就这样。我的工具提示已经创建了，但还没有显示
el.find（'.tooltip'）.show（）
el.数据（‘标题’、el.道具（‘标题’）；
el.removeAttr（“标题”）；
}，函数（）{
var el=$（本）；
el.find（'.tooltip'）.hide（）.remove（）；
el.prop（标题），el.data（标题）；
}
);
//}
});
$（el+'.tooltip'）
没有意义。另外<代码>背景颜色
您确定要执行<代码>$（el+'.tooltip'）你应该做
el.find（'.tooltip'）对不起，背景颜色有问题。但是$（el+'.tooltip'）有什么问题吗？您可能是指el.find（'.tooltip'）
$（el+'.tooltip'）
没有意义。另外<代码>背景颜色
您确定要执行<代码>$（el+'.tooltip'）你应该做
el.find（'.tooltip'）对不起，背景颜色有问题。但是$（el+'.tooltip'）有什么问题吗？您可能是指el.find（'.tooltip'））
$(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'));
            }
            );
    //}
});