jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항은 무엇입니까?
- 小云云원래의
- 2018-01-22 11:21:081300검색
jQuery 버전 업데이트로 이전 버전의 Bind(), live(), Delegate() 이벤트가 바로 on으로 대체될 수 있게 되었습니다. 본 노트에서는 클릭 이벤트만 예로 들고, 주로 사용법을 살펴보겠습니다. on 이벤트 중: 본 글에서는 주로 참고할만한 가치가 있는 jQuery에서 이벤트를 바인딩하기 위해 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 op = $('<p id="test">点我</p>');
$(document.body).append(op);
$("#test").on('click', function(){
alert('这是事件前添加的DOM,可以正常触发点击事件');
});
} );
</script>
</head>
<body>
<p id="wrap"></p>
</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 op = $('<p id="test">点我</p>');
$(document.body).append(op);
} );
</script>
</head>
<body>
<p id="wrap"></p>
</body>
</html>3. 해결 방법: 이벤트 위임을 사용하세요. 주의할 점은 위임된 객체가 이미 DOM에 존재하거나 이벤트 전에 동적으로 추가되어야 한다는 점입니다. 이때 이벤트는 수신 대기를 위해 사용한 후 정상적으로 트리거될 수 있습니다. 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 = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
$("#wrap").on('click', $('#test'), function(){
alert('委托对象在事件前添加,可以正常触发点击事件');
});
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html>4. Delegation 이벤트 이후에 객체가 추가되며, 클릭 이벤트가 발생하지 않습니다
<!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 = $('<p id="wrap"></p>');
$(document.body).append(oWrap);
var op = $('<p id="test">点我</p>');
$("#wrap").append(op);
} );
</script>
</head>
<body>
</body>
</html>5. 설명: 직장에서는 이벤트 바인딩 및 이벤트에 on 이벤트가 더 일반적으로 사용됩니다. 위임, 적어도 나는 그것을 더 많이 접했습니다. 라이브 이벤트의 사용법 주된 이유는 이전 jQuery 객체가 $(document).on()과 같은 문서가 되었기 때문입니다. 따라서 다른 예를 제시하지 않겠습니다.
관련 권장 사항:
jquery appaend 요소의 잘못된 ID 바인딩 이벤트에 대한 해결 방법
루프에서 JQuery 바인딩 이벤트 문제에 대한 자세한 설명
이벤트 함수 사용에 대한 자세한 설명 자바스크립트에서 이벤트 속성을 사용하여 바인딩
위 내용은 jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!