1

ブロックの読み込み中にユーザーが要素 (アンカー、ボタンなど) を操作できないようにする、ユニバーサルな「ロックされた」クラスを作成しようとしています。単純なローディングロックだけで、本当に派手でも安全でもありません。

class="locked" を持つ要素のクリックを検出し、return false; でクリックを拒否しようとしています。私の問題は、要素の読み込みが完了し、「ロックされた」クラスを削除した後でも、要素にそれがあることを jQuery が検出することです。

ここにコード:

HTML

<div id="block"></div>

CSS

#block {
background-color:#ccc;
width:300px;
height:100px;
}

jQuery

$(document).ready(function () {

$("#block").addClass("locked");
$("#block").html("locked");

setTimeout(function () {
    $("#block").removeClass("locked");
    $("#block").html("unlocked !");
}, 4000);


$(".locked").click(function () {
    alert("locked! denying click event");
    return false;
});

});

jsFiddle で何が起こっているかを確認できます: (開発ツールを開いて、4 秒後にクラスが削除されたことを確認します)

jsFiddle のデモはこちら

これはバグですか、それとも何か間違っていますか (お勧めしません) ?

編集:有用な回答をありがとう!

4

4 に答える 4