クリックイベント/メモリリークの問題がある

Question

次のJavaScriptコードがあります。

var Foo = function() { 
     $('body').on('click', '.btn', this.update.bind(this)); 
    }; 

    Foo.prototype = (function() { 

     var update = function (e) { 
     console.log('update'); 
     e.preventDefault(); 
     }; 

     return { 
     update: update 
     } 

    })(); 

    new Foo(); 
    new Foo(); 
    new Foo(); 

私はFooコンストラクタの3つのインスタンスを作成しています。コンストラクタ内では、clickイベントをdom要素にアタッチしています。しかし、この方法では、new演算子を使用して3つのインスタンスを作成するため、clickイベントが3回追加されます。 3つのインスタンスを作成した後、そのDOM要素に1つのクリックイベントのみを添付するように、この作業を行うにはどうすればよいですか？

JSFIDDLE

Answer 1

var Foo = function() { 
$('body').off('click', '.btn'); 
$('body').on('click', '.btn', this.update.bind(this)); 
}; 

これは、それを再バインドし、その後、クリックイベントリスナーを削除します。そうすれば、1人のリスナーに限られます。

Answer 2

これは動作するはずです：

var binded = false; 
var Foo = function() { 
    if (!binded) { 
     $('body').one('click', '.btn', this.update.bind(this)); 
     binded = true; 
    } 
}; 

Answer 3

これはメモリリークではありません。これは、イベントを複数回バインドする場合のjQueryの動作です。あなたがそのようなことをすれば：

$('body').on('click', '.btn', function(e){/*logic here*/}); 
$('body').on('click', '.btn', function(e){/*logic here*/}); 
$('body').on('click', '.btn', function(e){/*logic here*/}); 

イベントを3回付けます。なぜあなたはこのことをクラスに入れ、クラスを3回インスタンス化すればイベントを添付しないと思うのですか？

var Foo = function() { 
    if(!Foo.instantiatedOnce) { 
    $('body').on('click', '.btn', this.update.bind(this)); 
    } 
    Foo.instantiatedOnce = true; 
}; 

Foo.prototype = (function() { 

    var update = function (e) { 
    console.log('update'); 
    e.preventDefault(); 
    }; 

    return { 
    update: update 
    } 

})(); 

Foo.instantiatedOnce = false; 

new Foo(); 
new Foo(); 
new Foo(); 

それはインスタンス間で共有されている静的変数をシミュレートするようなものであるというようなものをやって：

この動作を防止するための方法は、そのような何かを行うことです。