0

今朝問題が発生しました。次の行を書きました。

var Markup = '<div id="overlay"><h1>Test</h1><a id="close">Close</a></div>';

    $(document).ready(function() {
        $("#link").click(function() {
            $("body").append(Markup);
            $("#overlay").delay(500).animate({"opacity":"0.97"},2000);
        });

        $("#close").click(function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });
    });

#link をクリックすると、オーバーレイは完全に表示されますが、#close リンクが機能しません。ただ何も起こりません。#close をクリックした後もマークアップは残っています。

助言がありますか？

4

5 に答える 5

3

.click()メソッドが呼び出されたときにDOM内にある要素でのみ機能します。これは、DOMの準備ができたときです。.on()代わりに を使用し、クリック イベントを親要素に委譲する必要があります(バージョン 1.7 より前では、.delegate()の代わりに使用していました.on())。

$("body").on("click", "#close", function() {
    $("#overlay").delay(500).animate({"opacity":"0"}, 2000, function () {
        $(this).remove();
    });
    // Prevent the default click-behavior
    return false;
});

知らせ

アニメーションの完了時に実行されるコールバックのコンテンツを削除する必要があります。そうしないと、アニメーションが完了する前に要素が削除される可能性があります。

于 2012-07-25T07:39:48.967 に答える
1

このような声明：

$("#close").click(function() { ... });

...2 つの部分があります。最初の部分：

$("#close")

その時点で指定されたセレクターに一致する DOM に存在するすべての要素を含む jQuery オブジェクトを作成します。(ただし、id セレクターの場合、id は一意である必要があるため、1 つしかありません。)

2 番目の部分:

.click(function() { ... });

.click()メソッドが呼び出された jQuery オブジェクト内のすべての要素にメソッドを適用します。

あなたの場合、「close」要素が存在する前にドキュメント対応ハンドラーでその行を実行しているため、効果的に.click()空のjQueryオブジェクトを呼び出しており、ハンドラーはバインドされていません。これを修正する 2 つの方法は.click()、要素を追加した後に を実行するか、クリック ハンドラーが親要素 (この場合は本体) にバインドされているデリゲート イベント モデルに移動することです。

$("body").on("click", "#close", function() {
   // etc

この委任されたハンドラーを使用すると、本文でクリック イベントが発生すると、jQuery はターゲット要素が 2 番目のパラメーターのセレクターと一致するかどうかを確認し、一致する場合は関数を呼び出します。

バージョン 1.7 より前の jQuery で同じ効果を得るには.delegate()、; 本当に古いjQueryの使用のために.live()。

于 2012-07-25T07:58:57.877 に答える
0

これは、ページが読み込まれたときに、idがcloseのリンクがまだ存在しないため、イベントがそれにバインドされていないためです。.live（）を試してください

于 2012-07-25T07:38:53.423 に答える
0

要素を追加していて、イベントを委任する必要があります。

$(document).ready(function() {
    $("#link").on('click', function() {
        Markup.appendTo($("body")).delay(500).animate({"opacity":"0.97"},2000);
    });

    $(document).on("click", "#close", function() {
        $("#overlay").delay(500).animate({"opacity":"0"},2000, function() {
            $(this).remove();
        });
    });
});
于 2012-07-25T07:38:54.780 に答える
0

イベントをそれに委任する必要があります

$("body").delegate("#close","click",function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });
于 2012-07-25T07:39:05.817 に答える