Question

我有以下代码隐藏您点击的链接的父div。当div相对定位时，没有问题，但是当它们绝对定位时，它们将不会移除。

该脚本还将每个元素的状态保存到localStorage，并且只在第一次尝试关闭其中一个div时才会出现错误。我的意思是，如果你显示三个div，比如div 1,2和3，然后尝试关闭最顶层的div，它就不会关闭。如果您重新加载页面，并尝试关闭div 3，它在重新加载页面之前位于顶部，它将关闭。

要发布的代码太多了，so here's the jsFiddle for it。但这是后代的代码：

function loadWidgets() {
    $(".base").each(function () {
        var id = $(this).attr("id");
        var counter = localStorage.getItem("counter-" + id) || 0;
        var active = localStorage.getItem(id + "-active") || "";
        $.each(active.split(" "), function (k, v) {
            var s = v.split(",");
            if (s.length != 2) {
                return;
            }
            var newElement = $("#" + s[0]).clone(true, true);
            newElement.attr("id", s[1]).attr("class", "drag " + id).data("id", id).appendTo("body");
        });
    });
}

function closeWidget() {
    var id = $(this).parent().attr("id").match(/[a-zA-Z]+/g);
    $(this).parent().remove();
    var active = [];
    $($("." + id).not(".base")).each(function () {
        active.push(id + "," + $(this).attr("id"));
    });
    active = active.join(" ");
    localStorage.setItem(id + "-active", active);
}

function cloneWidget() {
    var id = $(this).attr("href").match(/[a-zA-Z]+/g);
    var key = "counter-" + id;
    var counter = localStorage.getItem(key) || 0;
    counter++;
    var newElement = $("#" + id).clone(true, true);
    newElement.attr("id", id + counter).attr("class", "drag " + id).appendTo("body");
    var active = [];
    $($("." + id).not(".base")).each(function () {
        active.push(id + ',' + $(this).attr("id"));
    });
    active = active.join(" ");
    localStorage.setItem(id + "-active", active);
    localStorage.setItem(key, counter);
}
loadWidgets();
$(".nav a").click(cloneWidget);
$(".close").click(closeWidget);

HTML：

<div class="base" id="one" style="background-color:blue">
    <a class="close" href="#">Close</a>
    <input class="input" id="test"/>
    <textarea class="textarea" id="test2"></textarea>

</div>
<div class="base" id="two" style="background-color:red">
    <a class="close" href="#">Close</a>
</div>
<div class="base" id="three" style="background-color:green">
    <a class="close" href="#">Close</a>
</div>
<div class="nav">
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">three</a>
</div>

Answer 1

jQuery的clone默认不复制事件：

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )
  [...]
  通常，绑定到原始元素的任何事件处理程序都不会复制到克隆。可选的withDataAndEvents参数允许我们更改此行为，并改为将所有事件处理程序的副本绑定到元素的新副本。

既然你在克隆的内容中绑定了一些事件，那么你也希望deepWithDataAndEvents成为现实：

var newElement = $("#" + s[0]).clone(true, true);

更正小提琴：http://jsfiddle.net/ambiguous/Jdutt/

Answer 2

您创建了一个新窗口小部件，但未将事件处理程序分配给关闭链接。

在 cloneWidget 函数的下一行输入：

$("#" + id + counter + " a.close").click(closeWidget);

jQuery没有删除绝对定位的div？

2 个答案: