バインドイベントは1回だけ

私は次のコードを持っています：

function someMethod()
{
  $(obj).click(function {});
}

someMethodが2回呼び出されるため、クリックイベントが2回バインドされます。一度だけバインドするにはどうすればよいですか？

それを適用できる場合は、おそらくevent.preventDefaultとevent.stopPropagationを 確認するか、次のようなメソッド内で毎回バインド解除してバインドしてください。

function someMethod()
{
  $(obj).off('click').on('click', function(e) {
    // put your logic in here 
  });
}

PNAの回答に加えて、誤ってすべてのクリックイベントのバインドを解除しないように、イベントのネームスペースについて検討することをお勧めします。

function someMethod（）{
    $（obj）.unbind（ 'click.namespace'）。bind（ 'click.namespace'、function（）{}）;
}

https://api.jquery.com/event.namespace/

この特定の関数をすでにバインドしているかどうかを判別するための組み込みメソッドはありません。複数のクリック関数をオブジェクトにバインドできます。例えば：

$('#id').bind('click', function(){
alert('hello');
});


$('#id').bind('click', function(){
alert('goodbuy');
});

オブジェクトがクリックされたときに上記を実行すると、helloとさようならを警告します。1つの関数のみがクリックイベントにバインドされていることを確認するには、クリックイベントハンドラーのバインドを解除してから、次のように目的の関数をバインドします。

$(obj).unbind('click').bind('click', function(){... });

明白な解決策は、someMethod()2回呼び出さないことです。それを修正できない場合は、状態変数を保持して、次のように一度だけバインドすることができます。

function someMethod()
{
    if (!someMethod.bound) {
        $(obj).click(function() {});
        someMethod.bound = true;
    }
}

注：これは、グローバル変数を導入するのではなく、関数自体のプロパティを使用して、バインドされているかどうかを追跡します。オブジェクト自体のプロパティを使用することもできます。

あなたはそれがここで機能するのを見ることができます：http : //jsfiddle.net/jfriend00/VHkxu/。

または、jQueryのon（）関数を使用します。これはon（）に似ていますが、イベントを複数回バインドした場合でも、イベントを1回だけ起動します。

http://api.jquery.com/one/

jQueryを使用すると、1回だけ簡単にいくつかの関数を呼び出すことができます。

function someMethod()
{

     $(obj).click(function() {});
      this.someMethod = $.noop;
}

私はあなたの論理を知らないので、これは提案です。あなたのために働くかもしれないし、しないかもしれません。

jqueryのlive（）関数とone（）関数を組み合わせてみてください。イベントの再バインドよりも優れた結果が得られます。

2つのDOM要素（親と子）がある場合、特別なケースが機能します。親ノードのLive（）は、イベントが呼び出されることを確認してから、one（）を呼び出して、一度だけ実行されるイベントを動的に登録します。（これは再バインドのような同様の機能を提供します）。

バインドされた要素にcssクラスを追加してから、それらを除外できます。

function someMethod()
{
    $(obj).not('.click-binded')
          .click(function {})
          .addClass('click-binded');
}

このメソッドはプラグインにも使用できます：

  $(obj).not('.datetimepicker-applied')
        .datetimepicker()
        .addClass('datetimepicker-applied');

var bound = false;

function someMethod()
{
    if(!bound)
    {
       $(obj).click(function {});
       bound = true;
    }
}

しかし、おそらく何らかの回避策を講じる前に、なぜそれが2回呼び出されるのかを調べます。

オブジェクトに1度だけバインドする場合は、フラグを実装してそのオブジェクトに固執する必要があります。

例えば：

if($('#id') && $('#id').data('done') == null)) {
    $('#id').bind('click', function() {
        alert('hello');
    });

    $('#id').data('done', true);
}

このjQuery拡張関数を使用できます。

$.fn.once = function (type, fn, uid) {
  if(uid == undefined) {
    console.error("Called $.once without uid\n", this, "\n", fn);
  }

  var dataStr = type+"-handler-"+uid;
  if(!this.data(dataStr)) {
    this.data(dataStr, true);
    this.on(type, fn);
  }
};

これを行う代わりに

$("button").on("click", function(){
  alert("You Clicked On A Button");
});

やった

$("button").once("click", function(){
  alert("You Clicked On A Button");
}, "btnHandler");

周りに機能があると

function addBtnHandler() {
  $("button").once("click", function() {
    alert("You Clicked On A Button");
  }, "btnHandler");
}

そして、私はそれを複数回呼びます

addBtnHandler();
addBtnHandler();
addBtnHandler();

1回だけ行います。

拡張はuidとタイプの両方をチェックすることで機能することに注意してください。つまり、同じタイプのuidでさまざまなタイプのハンドラーをバインドできます。変更するには編集してください。

var dataStr = type+"-handler-"+uid;

のようなもので

var dataStr = "handler-"+uid;

また、まだ存在していないdom要素またはdom要素がまだ作成されていないdom要素でイベントをバインドするために、jqueryのoffおよびonメソッドを1回だけ使用しようとしました。

$('.select').off('event').on('event', 'selector', function(e){ // });

このコードは正しく機能していませんでした

私は「1」方式である非常に有利な方法に出くわしました。イベントを1度だけバインドする場合に非常に便利です。

ドキュメントはこちら http://api.jquery.com/one/

これはメソッド 'on'と同じですが、複数のセレクターのイベントに固執しないという動作が異なります。

$('body').one('click', 'selector', function(){ // do your stuff here });

addEventListenerメソッドと彼のonceオプションを使用して、純粋なJSでこれを実現できます。

target.addEventListener('click', handler, {once: true});