0

divクリックしたリンクの親を非表示にする次のコードがあります。が相対的に位置する場合divは問題ありませんが、絶対位置にある場合は外れません。

また、スクリプトは各要素の状態を に保存しlocalStorage、div の 1 つを最初に閉じようとしたときにのみエラーが発生します。つまり、div 1、2、3 の 3 つの div を表示し、一番上の 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ため、同様に true にする必要があります。

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

修正されたフィドル: http://jsfiddle.net/ambiguous/Jdutt/

于 2012-09-16T00:38:42.827 に答える
1

新しいウィジェットを作成しますが、閉じるリンクにイベント ハンドラーを割り当てません。

次の行を取得して、cloneWidget関数の最後に配置します。

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