Question

我有以下代码：

$('a.uiTip').hover(function ()
    {
        $tip = '<div class="uiPop" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';

        $($tip).attr('id', $(this).attr('id')).load(AppURL + 'Organisations/Manage/Tip');

        $('body').append($tip);
    },
    function ()
    {
        $('.uiPopup').attr('id', $(this).attr('id')).remove();
    });

和一些链接：

<a id="12" class="uiTip">Link</a>

<a id="15" class="uiTip">Link</a>

这个想法是当用户悬停一个名为uiTip的链接时，它将附加Div并使用ajax加载某些内容，然后在unhover上再次从Dom中删除该元素。

然而它仍然在页面上...任何想法为什么以及如何解决这个问题？

似乎是将ID附加到我的身体而非小费！

Answer 1

删除功能中没有

$tip。分配一些ID，然后按ID删除对象：

$('a.uiTip').hover(function () {
        $tip = '<div id="theTipIsHere" class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';
        $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip');
    },
    function () {
       $('#theTipIsHere',this).remove();
    });

Answer 2

$ tip变量在悬停方法的本地范围内声明，因此无法从悬停方法中访问。引用uiPopup

范围内的$(this)类

$('a.uiTip').hover(function () {
            $tip = '<div class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';
            $(this).append($tip).load(AppUrl + '/Organisations/Ajax/OrganisationDetailsTip');
        },
        function () {
            $(".uiPopup", $(this)).remove();
        });

Answer 3

$('a.uiTip').hover(function () {
            $tip = '<div class="uiPopup" style="position:absolute;top:20px;left:20px;background:#ff0000;width:300px;height:300px;z-index:9999999999;"></div>';

            $newtip = $($tip).attr('id', $(this).attr('id')).load(AppURL + 'Organisations/Manage/Tip');

            console.log($newtip);

            $('body').append($newtip);
        },
        function () {
            $('.uiPopup').remove();
        });

jQuery将数据加载到元素中然后隐藏在unhover上

3 个答案: