绑定事件只有一次

Question

我有以下代码:

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

someMethod被调用两次,因此click事件被绑定两次.怎么才能让它只绑定一次？

Answer 1

如果你可以应用它,可能想看一下event.preventDefault和event.stopPropagation 或者unbind和bind,每次都在你的方法中

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

Answer 2

除了pna的答案之外,您可能希望考虑命名空间事件,这样您就不会意外地解除所有点击事件的绑定.

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

http://docs.jquery.com/Namespaced_Events

Answer 3

没有内置方法来确定您是否已绑定此特定函数.您可以将多个单击函数绑定到对象.例如:

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


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

如果你在单击对象时执行上述操作,它将提示你好,然后再见.要确保只有一个函数绑定到click事件,取消绑定click事件处理程序,然后绑定所需的函数,如下所示:

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

Answer 4

显而易见的解决方案是不要someMethod()两次打电话.如果你无法修复它,那么你可以保留一个状态变量,所以它只能像这样绑定一次:

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

注意:这使用函数本身的属性,而不是引入一个全局变量来跟踪它是否已被绑定.您还可以在对象本身上使用属性.

你可以在这里看到它的工作:http://jsfiddle.net/jfriend00/VHkxu/.

Answer 5

或者使用jQuery的one()函数,它类似于on(),但只触发一次事件,即使你多次绑定它.

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

Answer 6

jQuery只调用一次函数很容易:

function someMethod()
{

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

Answer 7

您可以使用这个 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();

它只执行一次。

请注意，该扩展通过检查 uid 和类型来工作。这意味着您可以使用相同的 uid 绑定不同类型的处理程序，您可能需要也可能不需要。要更改它，请编辑。

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

与类似的东西

var dataStr = "handler-"+uid;