제이쿼리 기초질문입니다. -.-;;;
본문
$(function(){
$('body').append("<div class='modal'><div class='cad'></div></div>");
$('.popUp').on('click',function(){
$('.modal').fadeIn('normal');
$('.cad').html("<img src='popup/57.gif'><img src='img/close.png'>");
});
$('.cad').on('click',function(){
$('.modal').fadeOut('normal');
});
위 소스가 있습니다.
다름아니라 .popUp 버튼을 클릭하면 그냥 모달레이어 하나 띄우는 것입니다.
위 소스를 보시면 아시다시피,
html 내부에다가
<div class='modal'><div class='cad'></div></div>
를 삽입하지 않고,
append 를 이용해서 body에 일단 먼저 넣었습니다.
모달레이어는 <div class='modal'> 이것이고, ( 투명도 있는 검정배경처리하는 용도)
이 안에다가 <div class='cad'>를 넣고, 이안에 이미지를 두개 나란히 넣을 것입니다.
즉,
html()을 이용해서 <img src='popup/57.gif'><img src='img/close.png'> 넣었습니다.
이렇게 하면, .popUp 을 클릭하면 잘 나옵니다..
문제는 닫을 때입니다.
.modal 안에 있는 .cad 레이어를 클릭하면 닫힙니다.
그런데,
.cad안에 있는 두번째 이미지인 <img src='img/close.png'>를 클릭해서 닫히게 하려고,,
$('.cad img:last').on('click',function(){
....
또는
$('.cad img:last-child').on('click',function(){
...
이렇게 바꾸면 안닫힙니다.
심지어,
$('.cad img').on('click',function(){
....
이렇게 해봐도 안 다칩니다.
곰곰히 고찰해보니,,,
제이퀘리에서 실시간으로 '생성된' 요소를
클릭가능이라든지,,암튼, 이럴 경우 live() 같은 명령어를 사용하는 기억이 납니다.
(비록, 지금은 live() 명령어는 사라졌지만.)
그래서,
.cad 안에 html() 명령어로 <img src='popup/57.gif'><img src='img/close.png'> 이것을
넣었는데,,이것은 화면에 나타나긴 하지만, 마우스 클릭과 같은 이벤트는
받아들여서 작동은 될 수가 없는,,,뭔가 유령과 같은 존재라선지,,,,,음..
헷갈리네요..
이 원인을 파악하실 능력이 있는 고수님 계시는지요? -.-;;;;
답변 2
$(document).on("click",".cad",function(){
$('.modal').fadeOut('normal');
});
동적으로 생성된 구조(append appendTo 등..)는 document를 대상으로 이벤트를 걸어야합니다.
크~
감사드립니다.
첨에 댓글 수정전에 알려주신데로
$(document).on('cad','click',function(){ 이렇게 해봐도 안되어서 다시 질문 올리려던 참에,,
다시 보니,, 댓글을 수정해주셨군요..
그래서, 그렇게 해보니,,,정말 완벽히 잘 돌아갑니다..
아. 그리고, 동적으로 생성된 것은 document를 대상으로 해야하는 것이군요...
가물가물하게 그런 개념이 들어지긴 했는데,,,
댓글 덕분에 뚜렷해졌습니다. ^^
아주 깊은 감사드립니다. ^^
속이 시원해졌습니다.
저도 전에 저거때문에 애먹었엇거든요 ㅋ
아르키어드님께서도 그러셨군요. ^^ .. 거듭 감사드립니다.
