Jquery에 바인딩된 이벤트가 여러 인스턴스 코드를 트리거합니다.-JS 튜토리얼-php.cn

Jquery에 바인딩된 이벤트가 여러 인스턴스 코드를 트리거합니다.

高洛峰

풀어 주다： 2017-01-04 14:09:58

원래의

1706명이 탐색했습니다.

'on' 기능을 사용하여 이벤트를 새 버튼에 바인딩합니다. 이 이벤트는 여러 번 실행됩니다.

<html> 
<head> 
  <meta name="viewport" content="width=device-width" /> 
  <title>码上飘</title> 
  <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javascript"></script> 
  <script> 
    $(function(){ 
      $(&#39;#btn1&#39;).click(function () { 
        $(&#39;#btnBind&#39;).on(&#39;click&#39;,function () { 
          alert(123); 
        }); 
      }); 
    }) 
  </script> 
</head> 
<body> 
<input id="btn1" type="button" value="确认" /> 
<input id="btnBind" type="button" value="绑定按钮" /> 
</body> 
</html>

로그인 후 복사

위 코드에서 볼 수 있듯이 'btn1' 버튼을 여러 번 클릭하면 클릭 이벤트가 'btnBind' 버튼에 최대한 바인딩되고 on이 발생합니다. 바인딩된 횟수만큼 트리거됩니다.

해결책:

1. 한 번만 바인딩하려면 먼저 'off'하여 바인딩을 해제한 다음 'on'하면 됩니다.

$(&#39;#btnBind&#39;).off(&#39;click&#39;).on(&#39;click&#39;,function () { 
  alert(123); 
});

로그인 후 복사

2. 한 번 실행한 후 Unbind()

$(&#39;#btn1&#39;).click(function () { 
    $(&#39;#btnBind&#39;).on(&#39;click&#39;,function () { 
      alert(123); 
    });<BR>     $("#btnBind").unbind("click") 
});

로그인 후 복사

위 바인딩 이벤트가 여러 번 발생하는 Jquery의 예제 코드는 모두 공유된 편집기 내용입니다. , 이것이 여러분에게 참고가 되기를 바라며, 또한 모든 사람들이 PHP 중국어 웹사이트를 지원하기를 바랍니다.

여러 인스턴스 코드를 트리거하는 더 많은 Jquery 온바운드 이벤트를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!