0

を使用してハイパーリンクをクリックできないという問題がありますon()。Stackoverflow で調査しましたが、まだ答えが見つかりません。

コードは次のようになります。

$(document).ready(function() {
    $(document).on('click', '.spoiler > a', function(e)
    {
        e.preventDefault();
        return false;
    });
});

その後、次のようにリンクが追加されます。

$("#chatContainer").append("<div class='spoiler'><a href='blah'>lorem ipsum</a></div>");

しかし、リンクをクリックすると、リンクは引き続きたどられます。clickハンドラがまったく呼び出されていないことが原因であることを確認しました。$(document).ready()また、関数が呼び出されていること、および要素が追加された後に要素が$('.spoiler > a')正しく選択されていることも確認し<a>ました。

では、なぜうまくいかないのでしょうか!? on()後で追加されたものであっても、そのセレクターに一致するすべての要素にバインドすることは想定されて いませんか?

[編集]要素の中にコードを入れると、動作しonclickます :<a>

$("#chatContainer").append("<div class='spoiler'><a href='blah' onclick='return doNothingWhenClicked();'>lorem ipsum</a></div>");

...

function doNothingWhenClicked()
{
    return false;
}

on()では、 !を使用すると機能しないのはなぜですか?

4

1 に答える 1

1

ドッ！私はそれを見つけました-それは私が投稿していなかったコードにありました、ごめんなさい。

他の場所では、クラスを削除する divのclickハンドラーを設定しました。.spoiler.spoiler

$('.spoiler').on('click', function(e)
{
    $(this).removeClass('.spoiler');
});

親のclickハンドラーは子のハンドラーの前に呼び出されるため、リンクをクリックすると、.spoilerクラスが親から削除されていました...同時にclick、子からバインディングが削除されました!

通常、私はこの質問を削除しますが、これは非常に厄介なバグだと考えているため、この質問/回答をここに残しておきます。

また、この状況をどのように処理するのが最善かについての提案も受け付けています...

于 2013-06-02T23:07:05.043 に答える