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();

我正在创建3个Foo构造函数的实例。在构造函数中，我将一个click事件附加到dom元素。但是，使用这种方法会将click事件附加3次，因为我使用new运算符创建了3个实例。 如何才能完成这项工作，以便在创建3个实例后，只将一个点击事件附加到该dom元素？

JSFIDDLE

Answer 1

The method add(Node) in the type LinkedList is not applicable for the arguments (char)

这将删除click事件侦听器，然后重新绑定它。这样它只限于一个听众。

Answer 2

这不是内存泄漏。如果多次绑定事件，这就是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();

做类似的事情就像模拟实例之间共享的静态变量一样。

Answer 3

这应该有效：

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

遇到点击事件/内存泄漏问题

3 个答案: