html 엘리멘탈 이벤트 문의.
<div>
<div></div>
</div>
div안에 있는 div가 제거될시 이벤트가 발생되게 하고 싶은데..
이런 이벤트가 있나요?
댓글 3개
letsgolee
13년 전
오브젝트가 destroy될 때 이벤트 발생관련하는게 원래 자바스크립트에는 없습니다. 다만 setTimeout을 이용해서 만들 수는 있습니다. 다행히 jQuery에 destroyed라는 event를 추가해주는 플러그인을 만든 사람이 있네요. 이걸 이용하면 쉽게 짤 수 있습니다. 예제소스를 만들어보았으니 테스트해보면 쉽게 알수 있어요. 원리도 간단합니다. 단순하게 bind로 destroyed event 추가만 해주면 되요.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Test for jQuery event.destroyed </title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Jacob Lee" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!--<script src="jquery.event.destroyed.js"
type="text/javascript"></script>-->
<script src="http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js"
type="text/javascript"></script>
</head>
<body>
<!-- Test for jQuery event.destroyed
When a object is destroyed, the event will show -->
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<button onclick="destroy_hello();">Click Me!</button>
<script type="text/javascript">
$(document).ready(function(){
$('.hello').bind('destroyed', function(){alert('goodbye "Hello"!');});
});
function destroy_hello()
{
$('.hello').remove();
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Test for jQuery event.destroyed </title>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Jacob Lee" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!--<script src="jquery.event.destroyed.js"
type="text/javascript"></script>-->
<script src="http://v3.javascriptmvc.com/jquery/dist/jquery.event.destroyed.js"
type="text/javascript"></script>
</head>
<body>
<!-- Test for jQuery event.destroyed
When a object is destroyed, the event will show -->
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
<button onclick="destroy_hello();">Click Me!</button>
<script type="text/javascript">
$(document).ready(function(){
$('.hello').bind('destroyed', function(){alert('goodbye "Hello"!');});
});
function destroy_hello()
{
$('.hello').remove();
}
</script>
</body>
</html>
게시판 목록
자유게시판
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 |
 thisgun |
4일 전 | 10 | |
| 199598 | 2개월 전 | 170 | ||
| 199597 | 2개월 전 | 197 | ||
| 199596 | 2개월 전 | 165 | ||
| 199595 | 2개월 전 | 159 | ||
| 199594 | 2개월 전 | 153 | ||
| 199593 | 2개월 전 | 187 | ||
| 199592 | 2개월 전 | 250 | ||
| 199591 |
 Gothrock |
2개월 전 | 392 | |
| 199590 | 2개월 전 | 307 | ||
| 199589 | 2개월 전 | 322 | ||
| 199588 | 2개월 전 | 590 | ||
| 199587 | 2개월 전 | 213 | ||
| 199586 | 2개월 전 | 253 | ||
| 199585 | 2개월 전 | 96 | ||
| 199584 | 2개월 전 | 144 | ||
| 199583 | 2개월 전 | 209 | ||
| 199582 | 2개월 전 | 201 | ||
| 199581 | 2개월 전 | 107 | ||
| 199580 |
Gothrock |
2개월 전 | 190 | |
| 199579 | 2개월 전 | 242 | ||
| 199578 | 2개월 전 | 212 | ||
| 199577 | 2개월 전 | 158 | ||
| 199576 |
 DSKim |
2개월 전 | 147 | |
| 199575 | 2개월 전 | 142 | ||
| 199574 |
비버팩토리
|
2개월 전 | 244 | |
| 199573 | 2개월 전 | 247 | ||
| 199572 | 2개월 전 | 206 | ||
| 199571 | 2개월 전 | 215 | ||
| 199570 | 2개월 전 | 180 | ||
| 199569 | 2개월 전 | 210 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기