<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
// 이벤트 연결
J("h1").one("click", function () {
J(this).html("CLICK");
alert("이벤트가 발생하였습니다.");
});
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$.noConflict();
var J = jQuery;
J(function () {
// 이벤트 연결
J("h1").one("click", function () {
J(this).html("CLICK");
alert("이벤트가 발생하였습니다.");
});
});
</script>
<title>Untitled Page</title>
</head>
<body>
<h1>Header-0</h1>
<h1>Header-1</h1>
<h1>Header-2</h1>
</body>
</html>
※ 사용법은 앞에서 설명한 이벤트 기본연결 bind() 와 동일하다.
one() 말고 unbind() 를 사용해서도 가능하다.
위의 one() 이벤트 핸들러를 unbind() 로 바꿔서 구현을 하면
<script>
$.noConflict();
var J = jQuery;
J(function () {
// 이벤트 연결
J("h1").click(function () {
//출력
J(this).html("CLICK");
alert("이벤트가 발생하였습니다.");
//이벤트 제거
J(this).unbind();
});
});
});
</script>
'공부 > JQuery' 카테고리의 다른 글
| JQuery_ [ jQuery PlugIn - Validate (유효성 검사) ] (0) | 2013.03.26 |
|---|---|
| JQuery_[ trigger() 이벤트 강제 실행 ] (0) | 2013.01.21 |
| JQery_[ hover() & toggle ] (0) | 2013.01.21 |
| JQuery_[ 이벤트 연결 기본 bind() ] (0) | 2013.01.21 |
| JQuery_[특정 태그 선택(find)] (0) | 2013.01.07 |