javascript - 「Facebox」ボックスで要素を見つける

Question

ここに私のリンクがあります：

test.php のリンクをクリックすると、jquery 'facebox' スクリプトを使用するモーダルボックスが開きます。

このボックスでクリックイベントを処理しようとしています。test.php のソースを表示すると、モーダルボックス内でリンクを見つけようとしている場所がわかります。

    $('#facebox .hero-link').click(alert('click!'));

ただし、クリックは検出されず、奇妙なことに、ページの読み込み時にクリックイベントが実行されます。

ただし、閉じるボタンにはボックスを閉じるクリックイベントが組み込まれています。自家製のクリックイベントが何らかの形で防止されていると思われますが、わかりません。

誰でも助けることができますか？通常、それはプロジェクトの最後の部分であり、いつものように私を支えています ;)

score 9 · Accepted Answer

まず、ドキュメントの読み込み時にアラートが表示される理由は、#clickメソッドが引数として関数を受け取るためです。代わりに、の戻り値を渡しました。これによりalert、アラートダイアログがすぐに表示され、null が返されます。

イベントバインディングが機能しない理由は、ドキュメントの読み込み時に#facebox .hero-linkまだ存在していないためです。これを修正するのに役立つ 2 つのオプションがあると思います。

オプション 1) フェイスボックスが表示された後にのみ、クリックイベントをバインドします。何かのようなもの：

$(document).bind('reveal.facebox', function() {
  $('#facebox .hero-link').click(function() { alert('click!'); });
});

Live Query は、ページが読み込まれて DOM が更新された後でも、自動的にイベントをバインドしたり、一致した要素のコールバックを起動したりすることで、jQuery セレクターの機能を利用します。

jQuery Live Query は、Facebox が DOM を変更したことを認識すると、クリックイベントを自動的にバインドします。次に、これを書くだけでよいはずです：

$('#facebox .hero-link').click(function() { alert('click!'); });

score 1 · Accepted Answer

または、イベント委任を使用します

これは基本的に、すべての要素ではなくコンテナにイベントをフックし、コンテナイベントのevent.targetをクエリします。

コードノイズを減らす（再バインドする必要がない）という点で複数の利点があります。また、ブラウザーのメモリでも簡単です（DOMにバインドされるイベントが少ない）。

ここでの簡単な例

簡単なイベント委任のためのjQueryプラグイン

PSイベントの委任は、間もなくリリースされる次のリリース（1.3）に組み込まれる予定です。

2 に答える 2