web-dev-qa-db-ja.com

イベントハンドラーがまだ存在しない場合にのみ、どのようにバインドできますか？

ドラッグアンドドロップイベントをバインドしたいページがあります。ブラウザのページ全体をドロップターゲットにしたいので、イベントをdocumentオブジェクトにバインドしました。ただし、アプリケーションのコンテンツはAJAXを介してメインコンテンツ領域に読み込まれます。これらのイベントハンドラーは、アップロードページが現在表示されているときにのみアクティブにする必要があります。

現在、アップロードページが取得されたときにイベントハンドラーをバインドしています。ただし、アップロードページがアクティブになるたびに、新しいイベントハンドラーがバインドされます。これにより、ユーザーがアップロードページに移動し、離れてから戻ってきたときに、ハンドラーが複数回起動されます。まだバインドされていない場合にのみハンドラーをバインドできれば、これを解決できると思っていました。これは可能ですか、それとも私はより良い代替案を見落としていますか？

役立つ場合は、関連するコード：

$(document).bind('dragenter', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}).bind('drop', function(e) {
    e.stopPropagation();
    e.preventDefault();
    self._handleFileSelections(e.originalEvent.dataTransfer.files);
});
jqueryevent-handlingdrag-and-drop
24
FtDRbwLXw6

新しいイベントハンドラーをバインドする前に、既存のイベントハンドラーのバインドを解除します。これは namespacedイベントで本当に簡単です[ドキュメント] ：

$(document)
  .off('.upload') // remove all events in namespace upload
  .on({
      'dragenter.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      'dragover.upload': function(e) {
          e.stopPropagation();
          e.preventDefault();
      },
      // ...
  });
32
Felix Kling

イベントを1回だけ追加したい場合は、新しいクローン要素ごとにunbind()/off()メソッドとbind()/on()メソッドを使用しないでください。

Code ProjectのWebサイトで、要素が存在する前であっても、イベントを1回だけ登録する方法を示す記事 "JQueryを使用してイベントをまだ追加されていないDOM要素にバインドする（Khrystyna Popadyukによる）" を見つけました。 詳細については彼の記事全文を読んでください。

$("body").on("click", ".your-style", function(event) {
       // your code ...
});
0
Márcio Antônio Slivak