0

我有以下代码将隐藏div您单击的链接的父级。's 相对定位时div没有问题，但绝对定位时不会移除。

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

要发布的代码有点多，所以这里是 jsFiddle。但这是后代的代码：

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>​
4

2 回答 2

2

默认情况下， jQueryclone不复制事件：

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

而且由于您的事件绑定到您正在克隆的内容中，因此您也希望deepWithDataAndEvents是真实的：

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

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

于 2012-09-16T00:38:42.827 回答
1

您创建了一个新的小部件，但没有将事件处理程序分配给Close链接。

取下一行并将其放在cloneWidget函数的末尾：

$("#" + id + counter + " a.close").click(closeWidget);
于 2012-09-16T00:40:24.490 回答