jquery追加元素并保留以后删除它的引用

时间:2014-03-03 11:18:07

标签: javascript jquery append scope

将div附加到dom的正确方法是什么,并保留稍后操作dom的句柄?和删除它的情况也会删除参考吗?如果不是我怎么样?

这是我发布的示例代码,请让我知道您的意见,以及是否有更好的方法来执行此操作。

请注意,我在数组中保留引用,因为许多元素可以操作元素。

var layovers=[];

function ajaxMe($e){
//do some ajax call
var lay=layoverThis($e);

layovers[lay].remove(); //does this remove added element from dom ? does it unset layouvers[lay] too ?
}

function layoverThis($e){
        var p=layover.push($('<div class="overlay" ><span><i class="fa fa-spinner fa-spin"/>loading</span></div>')) - 1;
        $e.append(layover[p]);
        return p;
    }

我能想到的最近的例子就像在Windows Os中打开文件夹一样。

当你打开一个文件夹时:一个新窗口打开到你的桌面,同时还有一个任务栏选项卡被添加到链接到附加到桌面的同一个窗口,允许系统操作窗口(关闭 - 恢复最小化等)。 。),那我怎么在javasript做这个。

我的问题是如何以灵活而不是黑客或内存浪费的方式进行此类行为。

1 个答案:

答案 0 :(得分:1)

您可以使用psudoClass和索引 - 在DOM中创建元素时,将事件添加到delete元素。或者有一个onclick,删除附加的父div ..

所以,你的代码看起来像是:

 function layoverThis($e){
    var p=layover.push($('<div class="overlay" ><span><i class="fa fa-spinner fa-    spin"/>loading</span> <span class="closeThis" onclick="$(this).parent().remove();" > Close </span></div>')) - 1;
    $e.append(layover[p]);
    return p;
}

如果这对您有用,请告诉我,我还有许多其他解决方案。

更新:

为方便对象可选,我会使用psudoClass ..

document.ready(function() {
    addADiv($('#myParent')); 

    getArrayOfDivs().css('background-color', 'red'); 

    doAjax(lastClicked);
});

function doAjax(ctrl)
{

}

var lastClicked = "";
$('.dynamicDivs').click(function() {
    lastClicked = $(this);
});

function getArrayOfDivs() {
   return $('.dynamicDivs');
}

function addADiv($where){
    var uniqueIdentifier = $('.dynamicDivs').count() + 1;
     $where.append($('<div class="overlay dynamicDivs ' + uniqueIdentifier + ' " ><span><i class="fa fa-spinner fa-     spin"/>loading</span></div>'));

}