이벤트를 연결시 on 메소드를 쓰는데 만약에 selector 매개변수로 이벤트 범위를 한정 할 수 있습니다.
#id명 는 id로 한정하는 selector이고 이러한 selector에 on 메소드를 추가하는 방법으로 이벤트의 연결 범위를 한정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 5px; padding: 5px;
border: 3px solid black;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (){
//이벤트에 연결합니다.
//$('h1').click(function(event){
$('#wrap').on('click', 'h1', function(){
var length = $('h1').length;
var targetHTML = $(this).html();
$('#wrap').append('<h1>' + length + ' - ' + targetHTML + '</h1>');
//이벤트 연결한 것을 삭제시 다음의 off 메소드를을 사용한다.
//$('#wrap').off('click', 'h1');
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>header</h1>
</div>
</body>
</html>
출력화면
클릭시 한줄이 계속 추가됩니다. 그리고 앞에 숫자가 더 붙습니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
|---|---|
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - 기본 이벤트를 제거하고 이벤트 전달 막는 법 2가지 (0) | 2014.10.11 |
| jquery - context 객체 활용 예제 (0) | 2014.10.11 |
| jquery - on메소드를 이용한 이벤트 연결 (0) | 2014.10.11 |
| Jquery - $.extend 메소드 사용법 (0) | 2014.09.12 |