jQuery 에서 on 바 인 딩 이벤트 사용 시 주의사항

4497 단어 jquery귀속 이벤트
jQuery 버 전이 업 데 이 트 됨 에 따라 이전 버 전의 Bind(),live(),delegate()사건 은 on 으로 대 체 될 수 있 습 니 다.이번 노트 는 클릭 사건 만 예 로 들 어 on 사건 의 용법 을 살 펴 보 았 습 니 다.
1.on 감청 으로 이벤트 전에 추 가 된 DOM 을 누 르 면 정상적으로 터치 할 수 있 습 니 다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oDiv = $('<div id="test">  </div>');
 $(document.body).append(oDiv);
 $("#test").on('click', function(){
 alert('        DOM,          ');
 });
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>
2.on 감청 으로 이벤트 클릭 후 추 가 된 DOM 은 정상적으로 실행 할 수 없습니다:

<!--  、   DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#test").on('click', function(){
 alert('        DOM,          ');
 });
 var oDiv = $('<div id="test">  </div>');
 $(document.body).append(oDiv);
 } );
</script>
</head>
<body>
 <div id="wrap"></div>
</body>
</html>
3.해결 방법:사건 의뢰 를 이용 합 니 다.주의해 야 할 것 은 의뢰 대상 은 DOM 에 이미 존재 하거나 이벤트 전 동적 으로 추가 되 어야 합 니 다.이때 on 으로 감청 한 후에 정상적으로 사건 을 촉발 할 수 있 습 니 다.그렇지 않 으 면 다음 과 같 습 니 다.절차 4:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 $("#wrap").on('click', $('#test'), function(){
 alert('          ,          ');
 });
 var oDiv = $('<div id="test">  </div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>
4.의뢰 대상 은 이벤트 후 추가,클릭 이벤트 실행 불가

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#wrap").on('click', $('#test'), function(){
 alert('          ,          ');
 });
 var oWrap = $('<div id="wrap"></div>');
 $(document.body).append(oWrap);
 var oDiv = $('<div id="test">  </div>');
 $("#wrap").append(oDiv);
 } );
</script>
</head>
<body>
</body>
</html>
5.설명:작업 중 에 on 이벤트 가 자주 사용 되 는 것 은 이벤트 바 인 딩 과 이벤트 의뢰 입 니 다.적어도 제 가 만난 것 이 많 습 니 다.live 이벤트 on 용법 은 주로 앞의 jQuery 대상 이 document 으로 바 뀌 었 습 니 다.예 를 들 어$(document).on()이 므 로 다른 예 를 들 지 않 습 니 다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!
c+const 참조 및 비 const 참조 소개
C++에서 이벤트 메커니즘 의 간결 한 실현 및 포기 해 야 할 특성

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage