☰

まだ存在しない場合にのみイベント ハンドラーをバインドするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon jquery event-handling drag-and-drop
まだ存在しない場合にのみイベント ハンドラーをバインドするにはどうすればよいでしょうか? 質問する

ドラッグ/ドロップ イベントをバインドしたいページがあります。ブラウザーのページ全体をドロップ ターゲットにしたいので、イベントをオブジェクトにバインドしました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);
});

ベストアンサー1

新しいイベントハンドラをバインドする前に、既存のイベントハンドラをアンバインドします。これは非常に簡単です。名前空間付きイベント[ドキュメント]:

$(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();
      },
      // ...
  });

おすすめ記事