복붙노트

[JQUERY] jQuery를 클릭 이벤트 발사 여러 번

JQUERY

jQuery를 클릭 이벤트 발사 여러 번

해결법


  1. 1.클릭 작업 만 한 번이 사용 확인하십시오 :

    클릭 작업 만 한 번이 사용 확인하십시오 :

    $(".bet").unbind().click(function() {
        //Stuff
    });
    

  2. 2..unbind () 사용되지 않으며 대신 .OFF () 메소드를 사용한다. 당신이) (CSTE 연구진은 호출 직전에 간단히) (.OFF 호출합니다.

    .unbind () 사용되지 않으며 대신 .OFF () 메소드를 사용한다. 당신이) (CSTE 연구진은 호출 직전에 간단히) (.OFF 호출합니다.

    이것은 모든 이벤트 핸들러를 제거합니다 :

    $(element).off().on('click', function() {
        // function body
    });
    

    등록 된 '클릭'이벤트 핸들러를 제거하려면 :

    $(element).off('click').on('click', function() {
        // function body
    });
    

  3. 3.더 나은 옵션) (사실 말이다 될 것이다 :

    더 나은 옵션) (사실 말이다 될 것이다 :

    $(".bet").one('click',function() {
        //Your function
    });
    

    여러 클래스와 각 클래스의 요구의 경우, 한 번 클릭합니다

    $(".bet").on('click',function() {
        //Your function
        $(this).off('click');   //or $(this).unbind()
    });
    

  4. 4.당신이) (즉 .OFF를 찾을 .unbind () 또는 .stopPropagation ()가 여전히 특정 문제가 해결되지 않으면 당신은 당신의 이벤트가 어떤 기포없이없이 처리하고자 할 때 사용하려고 .stopImmediatePropagation ()는 상황에서 좋은 작품 이미 다른 이벤트를 초래하는 처리된다. 뭔가 같은 :

    당신이) (즉 .OFF를 찾을 .unbind () 또는 .stopPropagation ()가 여전히 특정 문제가 해결되지 않으면 당신은 당신의 이벤트가 어떤 기포없이없이 처리하고자 할 때 사용하려고 .stopImmediatePropagation ()는 상황에서 좋은 작품 이미 다른 이벤트를 초래하는 처리된다. 뭔가 같은 :

    $(".bet").click(function(event) {
      event.stopImmediatePropagation();
      //Do Stuff
    });
    

    트릭을 수행합니다!


  5. 5.각에 그 함수를 호출하는 경우 다음 각 호에 핸들러의 또 다른 한 쌍을 추가하는 것, "클릭".

    각에 그 함수를 호출하는 경우 다음 각 호에 핸들러의 또 다른 한 쌍을 추가하는 것, "클릭".

    jQuery를 함께 핸들러를 추가하는 것은 단지 "온 클릭"속성의 값을 설정처럼되지 않습니다. 하나는 하나의 욕망으로 많은 핸들러로 추가 할 수 있습니다.


  6. 6.이벤트는 여러 번 등록 된 여러 시간 (심지어 같은 핸들러 경우) 실행됩니다.

    이벤트는 여러 번 등록 된 여러 시간 (심지어 같은 핸들러 경우) 실행됩니다.

    이 코드 조각이 페이지가 부분적으로 갱신 될 때마다 실행되는 경우 예를 들어 $ ( "Ctrl 키").에 ( '클릭'된 SomeFuncion)는 이벤트가 너무마다 등록되고있다. 그것이 등록 된 횟수에 따라 달라집니다 실행 횟수 -에서 Ctrl은 "이 된 SomeFuncion"여러 번 실행할 수 있습니다 번만 클릭 따라서 경우에도 마찬가지입니다.

    이 자바 스크립트에 등록 된 이벤트에 대한 사실이다.

    해결책:

    한 번만 "의"전화를 확인합니다.

    어떤 이유로 당신이 아키텍처는 다음이를 통제 할 수없는 경우 :

    $ ( "Ctrl 키") 해제 ( '클릭').; $ ( "Ctrl 키") (SomeFunction을 '클릭')에.;


  7. 7.나는 때문에 마크 업의 문제가 있었다.

    나는 때문에 마크 업의 문제가 있었다.

    HTML :

    <div class="myclass">
     <div class="inner">
    
      <div class="myclass">
       <a href="#">Click Me</a>
      </div>
    
     </div>
    </div>
    

    jQuery를

    $('.myclass').on('click', 'a', function(event) { ... } );
    

    당신은 그래서 사업부의 각 인스턴스에 대해 클릭 호출, 내가 HTML에 두 번 같은 클래스 'MyClass에'를해야 알 수 있습니다.


  8. 8.

    $('.bed').one(function(){ })
    

    문서 도구 :

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


  9. 9.우리는 인 stopPropagation ()의 클릭 트리거 이벤트에 너무 많은 시간을 피하기 위해해야합니다.

    우리는 인 stopPropagation ()의 클릭 트리거 이벤트에 너무 많은 시간을 피하기 위해해야합니다.

    $(this).find('#cameraImageView').on('click', function(evt) {
       evt.stopPropagation();
       console.log("Camera click event.");
    });
    

    또한, DOM 트리를 버블 링 이벤트가 통지되는 모든 부모 핸들러를 방지에서 이벤트를 방지합니다. 이 방법은 인수를 허용하지 않습니다.

    우리는이 방법이 지금까지 (해당 이벤트 객체) 호출 된 여부를 결정하는 event.isPropagationStopped ()를 사용할 수 있습니다.

    이 실행 같은 요소에 다른 핸들러를 방지하지 않습니다 well.Note이 방법은, 트리거 (과 트리거 사용자 정의 이벤트) 작동합니다.


  10. 10.더 나은 옵션이 꺼져 사용하는 것

    더 나은 옵션이 꺼져 사용하는 것

    <script>
    function flash() {
      $("div").show().fadeOut("slow");
    }
    $("#bind").click(function() {
      $( "body" )
        .on("click", "#theone", flash)
        .find("#theone")
          .text("Can Click!");
    });
    $("#unbind").click(function() {
      $("body")
        .off("click", "#theone", flash)
        .find("#theone")
          .text("Does nothing...");
    });
    </script>
    

  11. 11.모든 CSTE 연구진은 약 물건 () 및 사실 말이다 ()는 큰이며, JQuery와는 중대하다.

    모든 CSTE 연구진은 약 물건 () 및 사실 말이다 ()는 큰이며, JQuery와는 중대하다.

    하지만 가끔은, 당신은 사용자가 클릭 할 수 없습니다, 그 경우에 당신이 이런 일을 할 수있는 좀 더 명확 할 :

    function funName(){
        $("#orderButton").prop("disabled", true);
        //  do a bunch of stuff
        // and now that you're all done
        setTimeout(function(){
            $("#orderButton").prop("disabled",false);
            $("#orderButton").blur();
        }, 3000);
    }
    

    당신의 버튼과 같을 것이다 :

    <button onclick='funName()'>Click here</button>
    

  12. 12.특정 이벤트에 동일한 요소에 여러 번 바인딩 인해 발생합니다.

    특정 이벤트에 동일한 요소에 여러 번 바인딩 인해 발생합니다.

    나를 위해 일한 솔루션입니다 :

    .die () 메소드를 사용하여 연결된 모든 이벤트를 죽여.

    다음 방법 리스너를 연결합니다.

    그러므로,

    $('.arrow').click(function() {
    // FUNCTION BODY HERE
    }
    

    해야한다:

    $('.arrow').die("click")
    $('.arrow').click(function() {
    // FUNCTION BODY HERE
    }
    

  13. 13.이러한 솔루션의 방법으로도 문제가 해결되지 그래서 내 경우에는 내가 '위임'를 사용했다. 나는 그것이 다중 클릭 문제를 일으키는 아약스 호출을 통해 여러 번 나타나는 버튼이었다 생각합니다. 솔루션은 그래서 마지막 클릭이 인식 할 수있는 제한 시간을 사용했다 :

    이러한 솔루션의 방법으로도 문제가 해결되지 그래서 내 경우에는 내가 '위임'를 사용했다. 나는 그것이 다중 클릭 문제를 일으키는 아약스 호출을 통해 여러 번 나타나는 버튼이었다 생각합니다. 솔루션은 그래서 마지막 클릭이 인식 할 수있는 제한 시간을 사용했다 :

    var t;
    $('body').delegate( '.mybutton', 'click', function(){
        // clear the timeout
        clearTimeout(t);
        // Delay the actionable script by 500ms
        t = setTimeout( function(){
            // do something here
        },500)
    })
    

  14. 14.

    $(element).click(function (e)
    {
      if(e.timeStamp !== 0) // This will prevent event triggering more then once
       {
          //do your stuff
       }
    }
    

  15. 15.사실 말이다에만 페이지의 수명 동안 한 번 발사

    사실 말이다에만 페이지의 수명 동안 한 번 발사

    유효성 검사를 수행 할 경우 유효성 검사 후 페이지를 두지 않는 경우 때문에 그래서,이 올바른 해결책이 아닙니다, 당신은 돌아 오지 않았다. 사용하는 것이 좋습니다

    $(".bet").on('click',function() 
    { //validation 
       if (validated) { 
          $(".bet").off('click'); //prevent to fire again when we are not yet off the page
          //go somewhere
        }
    });
    

  16. 16.나는이 문제를 다룰 때, 난 항상 사용 :

    나는이 문제를 다룰 때, 난 항상 사용 :

    $(".bet").unbind("click").bind("click", function (e) {
      // code goes here
    }
    

    이 방법은 같은 스트로크에서 내가 바인딩을 해제하고 리 바인드.


  17. 17.https://jsfiddle.net/0vgchj9n/1/

    https://jsfiddle.net/0vgchj9n/1/

    이벤트가 항상 한 번만 발사 있는지 확인하려면 JQuery와 사실 말이다 ()을 사용할 수 있습니다. 이벤트 핸들러는 한 번만 호출 JQuery와 하나 보장합니다. 또한 현재 클릭 작업의 처리를 완료 할 때 더 클릭을 할 수 있도록 한 개 이벤트 핸들러를 구독 할 수 있습니다.

    <div id="testDiv">
      <button class="testClass">Test Button</button>
    </div>
    

    var subscribeClickEvent = function() {$("#testDiv").one("click", ".testClass", clickHandler);};
    
    function clickHandler() {
      //... perform the tasks  
      alert("you clicked the button");
      //... subscribe the click handler again when the processing of current click operation is complete  
      subscribeClickEvent();
    }
    
    subscribeClickEvent();
    

  18. 18.그 방법을 시도해보십시오

    그 방법을 시도해보십시오

    <a href="javascript:void(0)" onclick="this.onclick = false; fireThisFunctionOnlyOnce()"> Fire function </a>
    

  19. 19.나는 비교적와 같은 일반적인 이벤트 핸들러를 만들었다 사촌 내 경우에는, 온 클릭 이벤트가 여러 번 발사했다

    나는 비교적와 같은 일반적인 이벤트 핸들러를 만들었다 사촌 내 경우에는, 온 클릭 이벤트가 여러 번 발사했다

      `$('div').on("click", 'a[data-toggle="tab"]',function () {
            console.log("dynamic bootstrap tab clicked");
            var href = $(this).attr('href');
            window.location.hash = href;
       });`
    

    로 변경

        `$('div#mainData').on("click", 'a[data-toggle="tab"]',function () {
            console.log("dynamic bootstrap tab clicked");
            var href = $(this).attr('href');
            window.location.hash = href;
        });`
    

    또한 정적 탭을 클릭하십시오, 정적 및 동적 클릭에 대한 별도의 핸들러을해야

        `$('a[data-toggle="tab"]').on("click",function () {
            console.log("static bootstrap tab clicked");
            var href = $(this).attr('href');
            window.location.hash = href;
        });`
    

  20. 20.두 파일은 요소에 이벤트 처리기를 부착했다 그래서 내 경우에는 내가는