이벤트를 한 번만 바인딩

이벤트를 한 번만 바인딩

다음 코드가 있습니다.

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

일부 메서드는 두 번 호출되므로 클릭 이벤트가 두 번 바인딩됩니다.어떻게 하면 한 번만 바인딩할 수 있습니까?

만약 당신이 그것을 적용할 수 있다면, 아마도 event.proventDefault와 event.stopPropagation 또는 매번 바인딩을 해제하고 바인딩을 당신의 메소드 안에서 검토하고 싶을 것입니다.

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

pna의 답변 외에도, 당신은 실수로 모든 클릭 이벤트의 바인딩을 풀지 않도록 당신의 이벤트 사이에 이름을 넣는 것에 대해 생각하고 싶을 수도 있습니다.

함수 someMethod() {$(obj).bind를 해제합니다("click."). click.", 함수 "{ }");}

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

이 특정 함수를 이미 바인딩했는지 여부를 확인하는 내장 메서드는 없습니다.개체에 여러 클릭 함수를 바인딩할 수 있습니다.예:

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


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

개체를 클릭할 때 위의 작업을 수행하면 개체가 hello를 경고하고 안녕합니다.하나의 기능만 클릭 이벤트에 바인딩되도록 하려면 클릭 이벤트 핸들러의 바인딩을 해제한 다음 다음과 같이 원하는 기능을 바인딩합니다.

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

또는 on()과 유사하지만 이벤트를 여러 번 바인딩하더라도 한 번만 실행하는 jQuery의 one() 함수를 사용합니다.

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

확실한 해결책은 전화하지 않는 것입니다.someMethod() 번.수 한 할 수 . 번 두 수 수 정 할 경 없 상 변 유 여 다 하 음 과 다 있 니 습 같 수 지 이 한 할 를 수 바 번 딩 만 인 태 는 우 ▁twice 다 ▁so ▁variable ▁if 니 ▁once 두 있 ▁state ▁a 습 ▁then ▁keep ▁you , ▁that ▁you 번 ▁can 수 ▁like ▁ever : ▁it

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

참고: 이는 글로벌 변수를 도입하는 대신 함수 자체의 속성을 사용하여 바인딩되었는지 여부를 추적합니다.개체 자체에 대한 속성을 사용할 수도 있습니다.

http://jsfiddle.net/jfriend00/VHkxu/ 에서 작동하는 것을 볼 수 있습니다.

jQuery를 사용하면 일부 기능을 쉽게 호출할 수 있습니다.

function someMethod()
{

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

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

바인딩된 요소에 CSS 클래스를 추가한 다음 필터링할 수 있습니다.

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

이 방법은 플러그인에도 사용할 수 있습니다.

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

저는 당신의 논리를 모르기 때문에 이것은 제안입니다.당신에게 도움이 될 수도 있고 안 될 수도 있습니다.

jquery live() 함수와 하나() 함수를 결합하면 이벤트 리바인딩보다 더 좋은 결과를 얻을 수 있습니다.

특수한 경우는 DOM 요소(상위 및 하위)가 2개인 경우에 작동합니다.상위 노드의 Live()는 이벤트가 호출되는지 확인한 다음()를 호출하여 한 번만 실행되는 이벤트를 동적으로 등록합니다.(리바인딩과 유사한 기능을 제공합니다.)

개체에 한 번만 바인딩하려면 플래그를 구현하고 해당 개체를 고수해야 합니다.

예:

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

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

var bound = false;

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

해결책을 만들기 전에 왜 두 번이나 전화가 오는지 알아보겠습니다.

저는 또한 아직 존재하지 않거나 돔 요소가 생성되지 않은 돔 요소로 바인딩 이벤트에 대한 jquery의 off and on 방법을 한 번만 사용하려고 했습니다.

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

이 코드는 제대로 작동하지 않았습니다.

저는 '하나의' 방법이라는 매우 수익성 있는 방법을 발견했습니다.이벤트를 한 번만 바인딩하려는 경우 매우 유용합니다.

이 문서는 https://api.jquery.com/one/ 에서 찾을 수 있습니다.

이는 메서드 'on'과 동일하지만 여러 셀렉터에 대한 이벤트를 고수하지 않는 것과 동작이 다릅니다.

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

addEventListener 메서드와 hisone 옵션을 사용하여 순수 JS로 이를 달성할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/8408826/bind-event-only-once