绑定事件仅一次

我有以下代码：

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

someMethod被调用两次，因此click事件被绑定两次。如何使它只绑定一次？

如果可以应用它，可能想看看event.preventDefault和event.stopPropagation 或每次取消绑定并绑定，例如

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

除了pna的答案外，您不妨考虑对事件进行命名，以免意外地解开所有单击事件的绑定。

函数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');
});

如果您在单击对象时执行上述操作，则会打招呼，然后再见。为了确保只有一个功能绑定到click事件，请取消绑定click事件处理程序，然后像这样绑定所需的功能：

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

显而易见的解决方案是不打电话someMethod()两次。如果您无法解决此问题，则可以保留一个状态变量，这样它只能像这样绑定一次：

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

注意：这使用函数本身的属性，而不是引入全局变量来跟踪其是否已绑定。您还可以在对象本身上使用属性。

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

或者使用jQuery的one（）函数，该函数类似于on（），但是即使事件绑定多次，也只会触发一次事件。

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

jQuery使调用某个函数仅非常容易一次：

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;
    }
}

但我可能会研究为什么会在进行某种变通之前将其调用两次。

如果只想绑定到该对象一次，则应实现一个标志并坚持该对象。

例如：

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

它只做一次。

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

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

用类似的东西

var dataStr = "handler-"+uid;

我还尝试使用jquery的on和on方法仅将绑定事件与不存在的dom元素或尚未创建dom元素一起使用一次。

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

该代码无法正常工作

我遇到了一种非常有利可图的方法，即“一个”方法。当您只想绑定一个事件时，它非常有用。

你可以在这里找到文件 http://api.jquery.com/one/

这与方法“ on”相同，但行为不同，不遵循多个选择器的事件。

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

您可以使用addEventListener方法及其一次选项使用纯JS实现此目标

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